Javascript 使用Jquery/css删除移动Chrome上的红色边框

我正在尝试从用于突出显示验证错误的div中删除一个红色边框。我想用透明度替换边框，这样当单击带有

.swatches

类的元素时，边框将被“删除”

此代码确实有效（包括注释掉的行），但此问题出现在Mobile Chrome上

你知道问题是什么吗

类

cf

和

颜色表单字段

没有任何与之关联的样式

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

这是我的职责

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

以下是

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>

选择颜色：银色-增加10.00英镑

您可以尝试：

var color = none;

---

而

边框

将被破坏，并且不会显示。

这不起作用，因为移动chrome不推荐使用

。单击

。我无法使用jquery mobile所谓的我的函数，例如：

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

---

某些浏览器不支持透明的

边框颜色

。你有没有检查过当你使用另一种颜色时它是否有效，例如白色？是的，我尝试了

#f8f8

颜色它没有任何区别：（你在

（$（el.css（'color'）！=color）

行中的颜色比较将不起作用。请参阅以获得更好的解决方案。你的意思是

var color='none'；

或

边框颜色：无；

，对吗？