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%すると 1 ピクセルの余白が生じるためです。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;
}