CSS伪类形式的输入，消失在自举

2015-03-02 50 views 1 likes

当我使用的输入与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伪类形式的输入，消失在自举

回答

相关问题