Question

当你在输入文本上进行聚焦（onclick）时，它可以像这样做。任何帮助，将不胜感激。

Answer 1

您可以使用outline和:focus，它们与主流浏览器兼容。

HTML

<input type="text" class="inp" />
<br>
<input type="text" class="inp" />

CSS

.inp{
    border:solid 2px gray;    
    margin: 20px 5px;
    outline:solid 10px silver;
}
.inp:focus{
    outline:solid 10px red;
}

Preview on JSFiddle

Answer 2

你可以这样做：

input:focus
{
    background-color:blue;//*
}

* 这只是改变背景颜色的一个例子。你想要的任何东西

看一下完整的例子here。

Answer 3

您可以使用锚标记包装输入，并将其设置为更改背景颜色onfocus：

<a class='focused'><input /></a>

使用CSS：

.focused:hover{ background-color:blue; }

或者，如果您希望在input处于活动状态时进行更改，则需要使用javascript / jQuery。

Answer 4

我认为你必须在div中包装每个输入，并在使用JavaScript聚焦时给该div一个背景颜色。这是jQuery中的一个版本......

$(document).ready(function() {
    $('input').on('focus', function() {
        $(this).parent().css('background-color', 'blue');
    });
});

Answer 5

我认为这个CSS技巧在实际案例中很少使用，但很有趣，我们可以使用盒子阴影来实现这个效果。

http://jsfiddle.net/XSpwg/

HTML：

<div>
<form>
   <input></input>
   <input></input>
   <input></input>
</form>
</div>

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;
}

Answer 6

对各种效果使用伪类选择器。

使用CSS

有两种可能的方法

方法1 - ＆gt;如果您需要悬停和焦点效果，请使用<input>元素的边框样式

这是方法1的典型HTML和CSS， - ＆gt; Jsfiddle view

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

.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;
}

方法2 - ＆gt;如果您只需要悬停效果，请将<input>元素包含在<div>中，并为其添加:hover效果，或者您可以使用方法1 :hover并删除{ {1}}选择器

这是方法2的典型HTML和CSS， - ＆gt; Jsfiddle view

HTML

:focus

CSS

<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>

我的建议 - ＆gt;只需使用焦点效果，因为在悬停时会突出显示鼠标所在的.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; }，即使您正在另一个<input>＆gt;

中键入（焦点）

如何在OnFocus上使用CSS创建输入文本边框

6 个答案:

HTML

CSS

Preview on JSFiddle