Entfernen eines roten Rands auf Handy Chrome mit Jquery/css

Question

Ich versuche, einen roten Rahmen von einem div zu entfernen, das verwendet wird, um Validierungsfehler hervorzuheben. Ich möchte die Grenze durch eine Transparenz ersetzen. Wenn also ein Element mit der Klasse .swatches angeklickt wird, wird die Umrandung "entfernt".

Dieser Code funktioniert (einschließlich der auskommentierten Zeilen), aber dieses Problem wird auf Mobile Chrome angezeigt.

Irgendeine Idee, was das Problem sein könnte? Die Klassen cf und colour-form-field haben keine Stile zugeordnet.

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

Das ist meine Funktion.

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}); 
    } 
} 

Hier ist der 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> 

Answer 1

Dies funktioniert nicht, da .click für mobile Chrome veraltet ist. Ich konnte jquery Mobile nicht so genannt meine Funktion wie folgt verwenden:

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

Answer 2

Sie können versuchen:

var color = none; 

und border gebrochen werden, und wird nicht angezeigt werden.