Html 当它是 OnFocus 时如何使用 CSS 制作输入文本边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18173816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make input text border with CSS when it's OnFocus
提问by Jake
it's possible to make it like this when you onfocus (onclick) on the input text. Any help would be appreciated.
当您在输入文本上聚焦 (onclick) 时，可以做到这一点。任何帮助，将不胜感激。
回答by Nabil Kadimi
You can make use of outlineand :focus, these are compatible with major browsers.
HTML
HTML
<input type="text" class="inp" />
<br>
<input type="text" class="inp" />
CSS
CSS
.inp{
border:solid 2px gray;
margin: 20px 5px;
outline:solid 10px silver;
}
.inp:focus{
outline:solid 10px red;
}
Preview on JSFiddle
在 JSFiddle 上预览
回答by codeMan
回答by ygesher
You can wrap the input with an anchor tag, and set it to change background-color onfocus:
您可以使用锚标记包装输入，并将其设置为更改 background-color onfocus：
<a class='focused'><input /></a>
<a class='focused'><input /></a>
with CSS:
使用 CSS：
.focused:hover{
background-color:blue;
}
.focused:hover{
background-color:blue;
}
or, if you want it to change when the inputis active, you need to use javascript/jQuery.
或者，如果您希望它在input活动时更改，则需要使用 javascript/jQuery。
回答by MikesBarto2002
I think you would have to wrap each input in a div and give that div a background color when it has focus using JavaScript. Here's a version in jQuery...
我认为您必须将每个输入包装在一个 div 中，并在使用 JavaScript 获得焦点时为该 div 提供背景颜色。这是jQuery中的一个版本......
$(document).ready(function() {
$('input').on('focus', function() {
$(this).parent().css('background-color', 'blue');
});
});
回答by Maria
I think this CSS trick can be used rarely in real cases, but it is funny, that we can make this effect with box-shadows.
我认为这个 CSS 技巧在实际情况下很少使用，但有趣的是，我们可以使用 box-shadows 来实现这种效果。
HTML:
HTML：
<div>
<form>
<input></input>
<input></input>
<input></input>
</form>
</div>
CSS:
CSS：
div {
background-color: lightgrey;
width: 80%;
max-width: 400px;
overflow: hidden;
padding: 5px;
}
input {
margin: 2em 0.5em;
display: block;
border: solid 2px lightblue;
outline: none;
height: 16px;
line-height: 16px;
font-size: 12px;
}
input:focus {
box-shadow: 180px 227px 0 200px lightgrey,
180px 195px 0 200px blue;
}
回答by ParokshaX
Use pseudo-class selector for various effects.
使用伪类选择器实现各种效果。
There are two possible methodsusing CSS
使用 CSS有两种可能的方法
Method 1--> if you need both hover and on focus effect then use border styling for the <input>element
方法 1--> 如果您同时需要悬停和焦点效果，则为<input>元素使用边框样式
here is a typical HTML and CSS for method 1, --> Jsfiddle view
这是方法 1 的典型 HTML 和 CSS，--> Jsfiddle 视图
HTML
HTML
<form class="form-style">
<input class="input-style" type="text" name="some-name">
<input class="input-style" type="text" name="some-name">
</form>
CSS
CSS
.form-style
{
width: 250px;
margin:auto;
background-color: #d6d6d6;
display:block;
}
.input-style
{
width:200px;
margin:auto;
padding-left: 0px;
padding-right: 0px;
line-height: 2;
border-width: 20px 25px;
border-collapse: separate;
border-style: solid;
border-color: #d6d6d6;
display: block;
}
input.input-style:focus, input.input-style:hover
{
border-color: #3399FF;
}
Method 2-> if you need just a hover effect then enclose the <input>element in a <div>and add :hovereffect to it, or you can use the method 1 :hoverand remove the :focusselector
方法 2-> 如果您只需要悬停效果，则将<input>元素括在 a 中<div>并:hover为其添加效果，或者您可以使用方法 1:hover并删除:focus选择器
here is a typical HTML and CSS for method 2, --> Jsfiddle view
这是方法 2 的典型 HTML 和 CSS，--> Jsfiddle 视图
HTML
HTML
<form class="form-style">
<div class="input-style">
<input type="text" name="some-name">
</div>
<div class="input-style">
<input type="text" name="some-name">
</div>
</form>
CSS
CSS
.form-style
{
width:250px;
margin:auto;
display:block;
}
.input-style
{
width: 200px;
background-color: #d6d6d6;
padding:20px 25px 20px 25px;
display: block;
}
.input-style input
{
width:inherit;
line-height: 2;
display: block;
}
.input-style:hover
{
background-color: #3399FF;
}
My advice -> just use on focus effect, because on hover will highlight the <input>on which the mouse is over even if you you are typing (on focus) in another <input>
我的建议 -> 只使用焦点效果，因为<input>即使您在另一个位置打字（焦点），悬停时也会突出显示鼠标所在的位置<input>
