[CSS] input樣式定制

input樣式

定制一個泥團input，想怎么捏就怎么捏

appearance: none

所有主流瀏覽器都不支持 appearance 屬性。

Firefox 支持替代的 -moz-appearance 屬性。

Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。

• 去除系統默認appearance的樣式引發的問題
• 改變按鈕和其他控件的外觀，使其類似於原生控件。
• appearance 是一個 不規范的屬性（unsupported WebKit property）,它沒有出現在 CSS 規范草案中.此屬性非標准且渲染效果在不同瀏覽器下不同，有些屬性值甚至不支持.

使 div 元素看上去像一個按鈕

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

appearance: normal|icon|window|button|menu|field;

caret-color

用於改變input獲取焦點時候，閃耀光標的顏色，而不改變placeholder的字體顏色

caret-color 屬性用來定義插入光標（caret）的顏色，這里說的插入光標，就是那個在網頁的可編輯器區域內，用來指示用戶的輸入具體會插入到哪里的那個一閃一閃的形似豎杠 | 的東西。

caret-color: auto| ;

caret-color

outline

用於去除input點擊獲取焦點時候，去掉外部瀏覽器的樣式，和border一起使用

CSS的outline屬性是用來設置一個或多個單獨的輪廓屬性的簡寫屬性 ， 例如 outline-style, outline-width 和 outline-color。 多數情況下，簡寫屬性更加可取和便捷。

/* 寬度 | 樣式 | 顏色 */
outline: 1px solid white;

outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

::placeholder

用於改變input的placeholder的樣式

偽元素::placeholder可以選擇一個表單元素的占位文本，它允許開發者和設計師自定義占位文本的樣式

input::-webkit-input-placeholder
/* Firefox < 19 */
input:-moz-placeholder
/* Firefox > 19 */
input::-moz-placeholder
/* Internet Explorer 10 */
input:-ms-input-placeholder

input-placeholder

text-indent

控制input文本開始的位置，默認的貼邊，不好看

text-indent 屬性 規定了 一個元素 首行 文本內容之前應該有多少水平空格。水平空格是塊級包含元素的內容盒子的左邊(對於從右向左布局來說是右邊).

(網上很多都提議是padding-left直接擠出一個位置，覺得不太合適，縮進方法感覺更適合)

text-indent: 3em       /*  values */
text-indent: 40px
text-indent: 15%       /*  values, relatives to the containing block width */
text-indent: each-line /* keywords values */
text-indent: hanging

text-indent: inherit

text-indent