Removing a red border on mobile Chrome with Jquery/css

Question

I'm trying to remove a red border from a div which is being used to highlight validation errors. I want to replace the border with a transparency so when an element with the .swatches class is clicked the border is "removed".

This code does work (including the commented out lines) however this issue is appearing on Mobile Chrome.

Any idea what the issue could be?

The classes cf and colour-form-field don't have any styles associated with them.

$('.swatches').click(function(){
    removeValidationBorder('#optionHolder', 'transparent'); //#f8f8f8
});

This is my function.

function removeValidationBorder(el, color) {
    console.log('removeValidationBorder');
    //if ($(el).css('color') == 'rgb(0, 0, 0)' || $(el).css('color') == 'red') {
    if ($(el).css('color') != color) {
        console.log('colors do not match');
        //$(el).css('border','2px solid ' + color);
        $(el).css({"border-width" : "2px", "border-style" : "solid", "border-color" : color});
    }
}

Here's the HTML:

<div id="optionHolder" class="cf colour-form-field" style="border: 2px solid transparent; margin-bottom: 4px;">
    <div id="colOptions" class="form-label">
      <h6>Select a colour: <span id="selectedColor">Silver - add £10.00</span></h6>
     </div>
     <ul class="swatches">
       <li id="productSwatch_83995"><a id="photoswitch_76171" title="Natural" href="#"><img src="images/products/options/76166_swatch.png" width="46" height="36" alt="Natural" title="Natural" border="0"><p><span>Natural</span></p></a></li>
       <li id="productSwatch_83996"><a id="photoswitch_76172" title="Black" href="#"><img src="images/products/options/76167_swatch.png" width="46" height="36" alt="Black" title="Black" border="0"><p><span>Black - add £10.00</span></p></a></li>
       <li id="productSwatch_83997"><a id="photoswitch_76173" title="Sand" href="#"><img src="images/products/options/76168_swatch.png" width="46" height="36" alt="Sand" title="Sand" border="0"><p><span>Sand - add £10.00</span></p></a></li>
       <li id="productSwatch_83998"><a id="photoswitch_76174" title="Cappuccino" href="#"><img src="images/products/options/76169_swatch.png" width="46" height="36" alt="Cappuccino" title="Cappuccino" border="0"><p><span>Cappuccino - add £10.00</span></p></a></li>
       <li id="productSwatch_83999" class="selected"><a id="photoswitch_76175" title="Silver" href="#"><img src="images/products/options/76170_swatch.png" width="46" height="36" alt="Silver" title="Silver" border="0"><p><span>Silver - add £10.00</span></p></a></li>
   </ul>                        

<input type="hidden" name="options[1]" value="83999" id="photoOptionDropDown">
</div>

Some browsers do not support *transparent* for `border-color`. Have you checked if it works when you apply another color, e.g. *white*? — gus27, Feb 09 '17 at 12:04
Yeah I tried the `#f8f8f8` color it didn't make any difference :( — user1532669, Feb 09 '17 at 12:07
Your comparation of colors in line `($(el).css('color') != color)` will not work. See [this answer](http://stackoverflow.com/a/11943970/4571082) for a better solution. — gus27, Feb 09 '17 at 12:53

score 0 · Answer 1 · answered Feb 09 '17 at 12:21

0

You can try:

var color = none;

and border will be broken, and will not be showing.

answered Feb 09 '17 at 12:21

Vitalii Andrusishyn

3,984
1
25
31

1

You mean `var color='none';` or `border-color: none;`, right? – gus27 Feb 09 '17 at 12:32

score 0 · Accepted Answer · answered Feb 09 '17 at 15:44

This isn't working because .click has been deprecated for mobile chrome. I couldn't use jquery mobile so called my function like so:

$('#selectedColor').on('DOMSubtreeModified', function(){
    removeValidationBorder('#optionHolder', 'transparent');
});

Removing a red border on mobile Chrome with Jquery/css

2 Answers2