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

Question

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

_{(来源:blogspot.com)}

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

我试过创建一个 css 三 Angular 形，但我无法使用它让它在那里工作: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 将三 Angular 形“包含”到 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;
}