使用css格式化文本字段并将缩进应用于外边框？

Question

有没有人知道将css样式缩进和边框发光（活动时）应用到textarea字段的方式？

我正在尝试使用纯css

设置textarea框的样式

.field{
width:150px;
height:20px;
border:1px solid #c6c6c6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-left:5px;
padding-right:4px;

}

.field:active {
width:150px;
height:20px;
border:4px solid #blue;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-left:5px;
padding-right:4px;

}

Answer 1

您需要使用:focus而不是:active来设置用户正在控制的输入的样式。 :active仅在单击项目时触发，因此不会影响用户已选中或当前正在键入的输入区域。

要实现发光而不是实线边框，您可以使用box-shadow。

.field:focus {
    box-shadow: 0 0 8px blue;
    outline: 0; /* optionally remove or change the outline */
}

我不清楚你要如何缩进文字，但你可以使用text-indent来做到这一点。

Here's a jsFiddle of the above.

注意：CSS中存在错误 - 十六进制颜色以散列#开头，但命名的颜色不是，即。 #blue不正确。