我正在处理一个HTML表单。我已经在我的一些输入字段中添加了必需的元素。因为我使用Bootstrap,所以当它聚焦时,输入字段默认为蓝色。我已经使用input:required:focus {border: 1px solid red;}
将必需的输入字段设置为红色。现在,当填充必需的输入字段时,我想将输入字段边框更改为绿色。我的问题是,CSS是否可以实现这一点?如何实现?如果不可以,我如何用Javascript或其他东西来实现这一点?
input:required:focus {
border: 1px solid red;
outline: none;
}
textarea:required:focus {
border: 1px solid red;
outline: none;
}
.form-horizontal {
padding-left: 15px;
padding-right: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="Name">
Full name <span class="required">*</span>
</label>
<div class="col-md-10">
<input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
<span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="email">
E-mail <span class="required">*</span>
</label>
<div class="col-md-10">
<input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email">
<span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="phone">
Phone number
</label>
<div class="col-md-10">
<input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text">
<span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="question">
Question <span class="required">*</span>
</label>
<div class="col-md-10">
<textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea>
</div>
</div>
<div class="col-md-10 col-md-offset-2">
<button type="submit" class="btn btn-default formbuttonalign">Send mail!</button>
</div>
</form>
3条答案
按热度按时间u4vypkhs1#
所以我发现HTML5包含一个
valid
和invalid
选择器。您可以将它与
required
选择器结合使用来检查它是否有效,因此它是否填充,以及它是否正确,就像电话号码只包含数字一样。有趣的是,它只有HTML5和CSS3:)a9wyjsp72#
你希望它什么时候变绿色?你开始输入的时候,还是当输入框失去焦点的时候?让我假设你希望它在失去焦点的时候变绿。另一个问题是:当它失去焦点时,它应该保持绿色吗?我假设它会,因为我的第一个假设是它只有在失去焦点时才会变绿。如果我的假设有错,请纠正我
Javascript:
13z8s7eq3#
在必填字段上使用oninput事件,然后验证是否已填充。
x一个一个一个一个x一个一个二个x