使用css对android开发者网站上的输入框进行样式化

如何使用纯“CSS”将下面类似输入框的图像样式化。我知道这可以通过jquery实现，但如果有办法使用CSS实现的话，我非常热衷。我从网站上拍摄了这张照片

我做的是HTML

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

我正在尝试的是=>也打开

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

一个选项是

我使用同级选择器使悬停和焦点工作：

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

并删除了“左”div。然后对右div进行了以下更改：

margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;

一个选择是

我使用同级选择器使悬停和焦点工作：

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

并删除了“左”div。然后对右div进行了以下更改：

margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;

---

我也遇到了同样的问题，我刚刚创建了一个这样的样式，它不需要额外的标记。请参见演示

---

我的解决方案是使用多个背景图像（实际上是，

线性渐变

），它们的大小是使用

背景大小

调整的。它可以在安卓4.3上运行，但我还没有在任何其他移动平台上测试过它。

我也遇到了同样的问题，我刚刚创建了一种不需要额外标记的样式。请参见演示

---

我的解决方案是使用多个背景图像（实际上是，

线性渐变

），它们的大小是使用

背景大小

调整的。它可以在Android 4.3上运行，但我还没有在任何其他移动平台上测试过它。

以下功能在Chrome中运行（并支持焦点/悬停颜色更改），使用背景CSS属性，而不在HTML中添加任何附加标记：

HTML:

---

演示：

以下内容在Chrome中工作（并支持焦点/悬停颜色更改），使用背景CSS属性，而不在HTML中添加任何其他标记：

HTML:

---

演示：

非常感谢。“.input:hover+.right”对我来说是一个非常新的概念。感谢您的指导。@user1995997它将影响同一父元素的下一个子元素，该子元素出现在

.input

之后。您可以使用

~

影响下一个孩子。您当前无法“返回”DOM，这就是我们无法对

执行相同操作的原因。左侧
您的代码比Android站点上的代码更干净、更简单。再次感谢，非常感谢。“.input:hover+.right”对我来说是一个非常新的概念。感谢您的指导。@user1995997它将影响同一父元素的下一个子元素，该子元素出现在
.input
之后。您可以使用
~
影响下一个孩子。您当前无法“返回”DOM，这就是我们无法对
执行相同操作的原因。左侧
您的代码比Android站点上的代码更干净、更简单。再次感谢。
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; 
}