1

如何使用纯“CSS”对输入框进行样式化，如下图所示。我知道这可以通过 jquery 来完成，但如果有办法使用 CSS 来做到这一点，我会很热心。我从Android 的开发者网站上获取了图片。

输入框

我所做的是HTML，

<form>
    <label>Email Address: </label>
    <div class='left'></div>
    <input type='text' class='input'/>
    <div class='right'></div>
</form>

和 CSS，

.left {
    display:inline-block;
    height:7px;
    border-left:1px solid #ccc;
    position:absolute;
    margin-top:23px;
}

.right {
    display:inline-block;
    height:7px;
    border-left:1px solid #ccc;
    position:absolute;
    margin-top:23px;
    margin-left:-1px;           
}

.input {
    display:inline-block;
    height:30px;
    font-size:16px;
    width:250px;
    border:1px solid  #ccc;
    border-width:0px 0px 1px 0px;
    padding:0px 5px;  
    outline:none;
}

.input:hover, .input:focus {
    border-color:#4ab5d9;
}

我正在尝试的是=>也在jsfiddle链接上

唯一的问题是，我找不到在悬停和聚焦时更改左右边框颜色的方法。

4

3 回答 3

6

一个选择是这个

我使用兄弟选择器来获得悬停和焦点工作：

.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
    border-color:#4ab5d9;
}

并删除了“左”div。然后对右侧进行了这些更改：

margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
于 2013-01-23T12:29:27.160 回答
2

我遇到了同样的问题，我刚刚创建了一种不需要额外标记的样式。有关演示，请参见http://codepen.io/killercup/pen/CBeAq 。

我的解决方案是使用多个背景图像（实际上是linear-gradient），这些图像使用background-size. 它适用于 Android 4.3，但我尚未在任何其他移动平台上对其进行测试。

于 2013-11-16T15:12:15.207 回答
2

以下使用背景 CSS 属性在 Chrome 中工作（并支持焦点/悬停颜色更改），而 HTML 中没有任何附加标签：

HTML：

<input type='text' class='holo'></input>

CSS：

input.holo[type='text'] {
  /* You can set width to whatever you like */
  width: 200px;
  font-family: "Roboto", "Droid Sans", sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 8px 8px 6px 8px;
  position: relative;
  display: block;
  outline: none;
  border: none;
  background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
  background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
  background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
  background-size: 1px 6px, 1px 1px, 1px 6px; 
}

演示：http: //jsfiddle.net/QKm37/

于 2014-02-07T22:28:56.063 回答