使用CSS匹配一个空的input框

如何将样式应用于空的input框? 如果用户在input字段中键入某些内容,则不应再应用该样式。 这是可能的CSS? 我试过这个:

input[value=""] 

如果只required该字段,则可以使用input:valid

 #foo-thing:valid + .msg { visibility: visible!important; } 
  <input type="text" id="foo-thing" required="required"> <span class="msg" style="visibility: hidden;">Yay not empty</span> 

在现代浏览器中,您可以使用:placeholder-shown来定位空input(不要与::placeholder混淆)。

 input:placeholder-shown { border: 1px solid red; /* Red border only if the input is empty */ } 

更多信息和浏览器支持: https : //css-tricks.com/almanac/selectors/p/placeholder-shown/

在CSS中没有这样做的select器。 属性select器匹配属性值,而不是计算值。

你将不得不使用JavaScript。

更新一个字段的值不会更新它在DOM中的值属性,这就是为什么你的select器总是匹配一个字段,即使它不是真的是空的。

而是使用invalid伪类实现你想要的,就像这样:

 input:required { border: 1px solid green; } input:required:invalid { border: 1px solid red; } 
 <input required type="text" value=""> <input required type="text" value="Value"> 

input[value=""]将不起作用

 <input type="text" /> 

但与铬合作为我工作

 <input type="text" value="" /> 

但是只要有人开始打字,风格就不会改变。 所以你应该使用js。

如果不需要支持传统浏览器,则可以使用requiredvalidinvalid的组合。

使用这个好东西是validinvalid伪元素与input字段的types属性很好地工作。 例如:

 input:invalid, textarea:invalid { box-shadow: 0 0 5px #d45252; border-color: #b03535 } input:valid, textarea:valid { box-shadow: 0 0 5px #5cd053; border-color: #28921f; } 
 <input type="email" name="email" placeholder="john_doe@example.com" required /> <input type="url" name="website" placeholder="http://johndoe.com"/> <input type="text" name="name" placeholder="John Doe" required/> 

这对我工作:

html: – 将必需的属性添加到input元素

 <input class="my-input-element" type="text" placeholder="" required /> 

CSS: – 使用:无效的select器

 input.my-input-element:invalid { } 

笔记:

  • input元素中的值是不需要的。
  • 关于w3Schools.com的要求,“当出现时,它指定在提交表单前必须填写input字段。”
 $('input#edit-keys-1').blur(function(){ tmpval = $(this).val(); if(tmpval == '') { $(this).addClass('empty'); $(this).removeClass('not-empty'); } else { $(this).addClass('not-empty'); $(this).removeClass('empty'); } }); 

在jQuery中。 我添加了一个类,并与CSS风格。

 .empty { background:none; } 

这个问题可能在前一段时间已经被问到了,但是正如我最近着手寻找客户端表单validation一样,以及:placeholder-shown 支持越来越好,我认为以下可能会帮助其他人。

使用Berend使用这个CSS4伪类的想法,我能够创build一个表单validation,只有在用户完成填充后才能触发。

这里是CodePen的修改和解释: https ://codepen.io/johanmouchet/pen/PKNxKQ

我想知道答案我们有明确的属性来获得空的input框,看看这个代码

 /*empty input*/ input:empty{ border-color: red; } /*input with value*/ input:not(:empty){ border-color: black; } 

UPDATE

 input, select, textarea { border-color: @green; &:empty { border-color: @red; } } 

在validation中有一个很好的外观更多

  input, select, textarea { &[aria-invalid="true"] { border-color: amber !important; } &[aria-invalid="false"], &.valid { border-color: green !important; } }