css - 使用 css 为 Android 输入创建类似 Holo 的主题

Question

有没有办法获得这种类型的输入：

_{（来源：blogspot.com）}

在不使用图像的情况下在 css 中模仿？

我已经尝试创建一个 css 三角形，但我无法使用它使它在那里工作：http ://css-tricks.com/snippets/css/css-triangle/我想到的唯一其他解决方案是图像。

Answer 1

你可以以某种方式模仿它：

http://jsfiddle.net/6Vhcw/

<span class="holo"><input type="text" /></span>

span.holo > input[type='text'] {
    border:none;
    outline:none;
    padding:0px;
}
span.holo {
    border-bottom:solid 1px blue;
    position:relative;
    overflow:hidden;
    padding:1px 0px;
}
span.holo:after,
span.holo::after {
    content:' ';
    overflow:hidden;
    width:10px;
    height:10px;
    display:inline-block;
    position:absolute;
    left:99%;
    bottom:-1px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border:solid 5px transparent;
    border-bottom-color:blue;
    border-right-color:blue;
}

不过，仅在 Chrome 桌面和 Palemoon（Firefox 桌面分支）上进行了测试。

奇怪的是，如果使用（在 Chrome 桌面上）left:99%会有一个像素边距。left:100%如果您不介意使用calc()，可以添加

left:99%;
left:-webkit-calc(100% - 1px);
left:-moz-calc(100% - 1px);
left:calc(100% - 1px);

http://jsfiddle.net/6Vhcw/1/

编辑：

刚刚意识到我可以使用padding将三角形“包含”到span：

http://jsfiddle.net/6Vhcw/2/

span.holo {
    padding-right:10px;
}
span.holo:after,
span.holo::after {
    right:0px;
}

编辑#2：

微调以“修复”怪异bottom:-1px：

http://jsfiddle.net/6Vhcw/3/

span.holo {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
span.holo:after,
span.holo::after {
    bottom:0px;
}