CSS僞類形式的輸入，消失在自舉

當我使用的輸入與required和/或pattern屬性，對錯誤的CSS僞類顯示器。例如開始鍵入該輸入一些字（不是數字），你看到它周圍的紅色陰影：CSS僞類形式的輸入，消失在自舉

<input type=text pattern="\d+" required>

但是當我使用bootstrap並添加form-control類的投入，CSS僞類（紅色陰影）不顯示在輸入：

<input type=text pattern="\d+" required class="form-control">

我怎麼能再次顯示CSS的僞類？

來源

2015-03-02 علیرضا

看看你的瀏覽器的控制檯中的CSS規則。你會看到什麼規則會覆蓋你的規則。 – 2015-03-02 06:31:36

你是否自己設定風格？因爲引導爲輸入元素設置了邊框顏色。您期望的紅色邊框可能僅僅是您的瀏覽器內部樣式表，儘管引導區樣式選擇器不太具體，但它仍然被評爲更重要。換句話說：嘗試涉及自己的風格：無效。 – j4k3 2015-03-02 06:54:00

我只是評論這一點，但因爲附加的片段似乎爲我工作，我也會把它變成一個答案。

你有沒有設置專門的風格自己？因爲引導爲輸入元素設置了邊框顏色。您期望的紅色邊框可能僅僅是您的瀏覽器內部樣式表，儘管引導區樣式選擇器不太具體，但它仍然被評爲更重要。

換句話說：嘗試包括你自己的風格：無效，使之重要！

<input type=text pattern="\d+" required> 
 
<style> input:invalid { border:1px solid red !important; }</style>

<input type=text pattern="\d+" required>

來源

2015-03-02 06:56:59 j4k3

不是邊框。發光的陰影。我使用Firefox。我發現問題返回到** [this]（https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L2542）**，bootstrap的'box-shadow' ，請覆蓋Firefox無效inut的陰影。我通過在我的css中添加'：-moz-ui-invalid {box-shadow：0 0 1.5px 1px red;}來解決問題。 – 2015-03-02 07:08:36

CSS僞類形式的輸入，消失在自舉

回答

相關問題