使用jquery/css移除Chrome上的紅色邊框

我試圖從正用於突出驗證錯誤的div中移除紅色邊框。我想用透明度替換邊框，所以當點擊一個帶有.swatches類的元素時，邊框被「移除」。使用jquery/css移除Chrome上的紅色邊框

此代碼無效（包括註釋掉的行），但是此問題出現在Mobile Chrome上。

任何想法可能是什麼問題？

類cf和colour-form-field沒有任何與它們關聯的樣式。

$('.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>

來源

2017-02-09 user1532669

某些瀏覽器不支持* transparent *作爲'border-color'。您是否檢查過它是否適用另一種顏色，例如*白色*？ – gus27

是的，我試過'＃f8f8f8'顏色，它沒有任何區別：（ – user1532669

你的顏色比較行'（$（el）.css（'color'）！= color）'不起作用。這個答案]（http://stackoverflow.com/a/11943970/4571082）更好的解決方案 – gus27

這是行不通的，因爲.click已被棄用的移動鉻。我無法使用jquery mobile，所以稱爲我的功能，如下所示：

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

來源

2017-02-09 15:44:37 user1532669

你可以試試：

var color = none;

和border將被打破，並不會顯示。

來源

2017-02-09 12:21:12

你的意思是'var color ='none';''或'border-color：none;'，對吧？ – gus27

Yes i這意味着。 –

使用jquery/css移除Chrome上的紅色邊框

回答

相關問題