創建使用CSS

Question

的Android輸入全息般的主題有沒有辦法讓這種類型的輸入：

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（火狐桌面叉），雖然上測試。

奇怪的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; 
}