使用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。
如果不需要支持传统浏览器，则可以使用required ， valid和invalid的组合。
使用这个好东西是valid和invalid伪元素与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; } }
