移動APP技巧摘錄

/*
去掉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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章