/* 去掉input在ios下的默認效果: input{ resize: none; -webkit-appearance:none; -webkit-appearance: none; 消除輸入框和按鈕的原生外觀,在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 -webkit-appearance:none; 一般用這個: ::-webkit-input-placeholder{color:#999;} input[type="text"],input[type="password"]{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;} } 在手機中的顏色漸變寫法:(只考慮webkit) background-p_w_picpath:-webkit-gradient(linear,0 0,0 100%,from(#f3b787),to(#e39e61)); background-p_w_picpath:-webkit-linear-gradient(top,#f3b787,#e39e61); 8、內外陰影同時存在的寫法: -webkit-box-shadow:1px 1px 1px #FFF inset,1px 1px 2px #ded5ba; 注意:內外陰影同屬於同一個css屬性(box-shadow),因此要寫在同一句box-shadow裏面,值用逗號分隔。內陰影是inset,外陰影爲默認,不需要寫outset,寫了outset反而不起作用了。 9、雙層邊框的寫法,可以使用內陰影來實現。有些按鈕除了有外邊框線之外,還會在邊框線內有一條1px大小的較亮的邊框線來提升按鈕視覺感受。此時要實現這條亮框線,就可以使用內陰影來實現,具體寫法如下: -webkit-box-shadow:1px 1px 1px #FFF inset, -1px -1px 1px #FFF inset; 值分別表示:水平方向位移、豎直方向位移、陰影大小、陰影顏色、內陰影。 要實現四個方向的內陰影,就要寫兩個值,一個是實現右下,一個實現左上。 */
CSS3 修改和去除移動端點擊事件出現的背景框 (tap-highlight-color)
-webkit-tap-highlight-color
參見 http://css-infos.net/property/-webkit-tap-highlight-color
這個屬性是用於設定元素在移動設備(如Adnroid、iOS)上被觸發點擊事件時,響應的背景框的顏色。
例如在Adnroid版本的微信中,點擊a標籤時將會出現一個橙色的小框表示點擊的響應。
此時,如果對元素設置了tap-highlight-color值,例如:
-webkit-tap-highlight-color: rgba(240,240,240,0.7);
則可改變元素被點擊時背景框的顏色。
如果需要背景框不顯示,則可以將rgba中的alpha值設爲0即可,例如rgba(0,0,0,0)
另外還有一個設置選中文字顏色的方法。
通常我們選中文字時的背景色是藍色。我們可以用以下樣式去設置網頁的選中內容的樣式:
::selection { background:#FFF; color:#333; }
::-moz-selection { background:#FFF; color:#333; }
::-webkit-selection { background:#FFF; color:#333;}
如果要去掉選中時的顏色,把background都置爲none就行了。
-webkit-user-modify 屬性用來設置用戶是否可以編輯元素內容 -webkit-user-modify: read-only | read-write | read-write-plaintext-only 取值: read-only:內容只讀。 read-write:內容可讀寫。 read-write-plaintext-only:內容可讀寫,但粘貼內容中的富文本格式(如文本的顏色、大小,圖片等)會丟失。內容類似於以純文本顯示。 示例地址: 在移動設備中type=number/email/text時,瀏覽器會調用不同版面的鍵盤,這樣加快用戶的輸入,體驗也更美好,如下 如果是type=range則會出現這樣的組件,供選擇範圍 如果是type=color則會出現顏色選擇器 如果是type=date則出現日期選擇器 如果是type=search,則在輸入時候出現一個一鍵清除的按鈕,點擊輸入的文字全部清除 另外,除了input的type新增量類別,還增加一些很實用的屬性,如placeholder,我們知道,input中我們常常會默認一些文案,當用戶輸入的時候會自動清除,html5之前我們是靠javascript實現的,但是有了html5,我們可以輕鬆實現,只需要placeholder=”默認文案” 如下 當然新增的不只有placeholder,還有譬如可以關閉默認大小寫的autocapitalize=”off”,有興趣的童鞋可以研究研究。 http://blog.csdn.net/wave_1102/article/details/41445189