2015-03-02 49 views
1

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

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

但是當我使用bootstrap並添加form-control類的投入,CSS僞類(紅色陰影)不顯示在輸入:

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

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

+1

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

+1

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

回答

1

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

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

換句話說:嘗試包括你自己的風格:無效,使之重要!

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

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

+1

不是邊框。發光的陰影。我使用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