3

当您在输入文本上聚焦（onclick）时，可以做到这一点。任何帮助，将不胜感激。

4

6 回答 6

7

您可以使用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;
}

在 JSFiddle 上预览

于 2013-08-11T16:06:59.480 回答
0

我认为这个 CSS 技巧在实际情况中很少使用，但有趣的是，我们可以使用 box-shadows 来制作这种效果。

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;
}
于 2013-08-11T17:17:23.760 回答
0

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

使用 CSS有两种可能的方法

方法 1 --> 如果您需要悬停和焦点效果，则为<input>元素使用边框样式

这是方法 1 的典型 HTML 和 CSS，--> Jsfiddle 视图

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 -> 如果您只需要悬停效果，则将<input>元素括在 a 中<div>并为其添加:hover效果，或者您可以使用方法 1:hover并删除:focus选择器

这是方法 2 的典型 HTML 和 CSS，--> Jsfiddle 视图

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

.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>鼠标所在的位置，即使您在另一个中键入（焦点）<input>

于 2013-08-11T17:22:44.193 回答
0

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

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

使用 CSS：

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

或者，如果您希望它在激活时更改，input则需要使用 javascript/jQuery。

于 2013-08-11T16:07:16.643 回答
0

我认为您必须将每个输入包装在一个 div 中，并在使用 JavaScript 获得焦点时为该 div 赋予背景颜色。这是jQuery中的一个版本......

$(document).ready(function() {
    $('input').on('focus', function() {
        $(this).parent().css('background-color', 'blue');
    });
});
于 2013-08-11T16:10:52.323 回答
0

你可以这样做：

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

*这只是一个改变背景颜色的例子。在这里做任何你想做的事情

看看这里的完整示例。

于 2013-08-11T16:04:19.177 回答