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

Question

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

Holo theme http://1.bp.blogspot.com/-Mi2BW-8T8eY/TwNpdVemR_I/AAAAAAAABAc/-oOTaZ5M4_A/s400/Screenshot_2011-11-17-22-23-18.png

在不使用图像的情况下模仿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桌面分支）上进行了测试。

奇怪的left:99%是因为如果使用left:100%，则会有一个像素边距（在Chrome桌面上）。如果您不介意使用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;
}