[英]Apply styles to button on input text with Bootstrap
我有一个使用Bootstrap的表单,我想在输入文本为焦点时将样式应用于按钮(例如当焦点背景为绿色时),我该怎么办?
主要结构:
<div class="col-md-5"><div class="input-group">
<input id="inputSearch cf" class="form-control" placeholder="Search..." type="text">
<span class="input-group-btn">
<button id="btnSearch" class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
这是我的JSFFidle: http : //jsfiddle.net/3Q3Le/
试试这个: http : //jsfiddle.net/3Q3Le/1/
#inputSearch:focus {
background-color: green;
color: #fff;
}
#inputSearch:focus + .input-group-btn #btnSearch {
background: red;
}
在您的站点css文件中添加此样式:
.form-control:focus {
border-color: #00cf00;
box-shadow: 0 1px 1px rgba(0, 207, 0, 0.075) inset, 0 0 8px rgba(0, 207, 0, 0.6);
outline: 0 none;
}
.form-control:focus + .input-group-btn .btn { background:green }
如果你想要你可以使用jQuery。
$("[id='inputSearch cf']").click(function() {
$("#btnSearch").css("backgroundColor","green");
});
当然在此之前你应该加载jQuery库
在这里你可以找到一个演示: http : //jsfiddle.net/3Q3Le/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.