蘋果自帶樣式覆蓋

2021-08-11 02:44:40 字數 1126 閱讀 2993

只要在樣式裡面加一句去掉css去掉iphone、ipad的預設按鈕樣式就可以了!~

input[type="button"], input[type="submit"], input[type="reset"]

如果還有圓角的問題,

.button 

我們在寫表單的時候會發現一些瀏覽器對表單賦予了預設的樣式,如在chorme瀏覽器下,文字框及下拉選擇框當載入焦點時,都會出現發光的邊框,並且在火狐及谷歌瀏覽器下,多行文字框textarea還可以自由拖拽拉大,另外還有在ie10下,當文字框輸入內容後,在文字框的右側會出現乙個小叉叉,等等。不容置疑,這些效果是在使用者體驗上得到了提公升,但有些時候我們並不需要這些預設的樣式,那怎麼辦呢?下面我們就來分別看一下解決辦法。

1、去除chrome等瀏覽器文字框預設發光邊框

input:focus, textarea:focus

去掉高光樣式:

input:focus

當然這樣以來,當文字框載入焦點時,所有瀏覽器下的文字框的邊框都不會有顏色上及樣式上的變化了,但我們可以重新根據自己的需要設定一下,如:

input:focus,textarea:focus

這樣的話,當文字框載入焦點時,邊框顏色就會變為橙色,給使用者乙個反饋。

2、去除ie10+瀏覽器文字框後面的小叉叉

只需下面一句就ok了

input::-ms-clear

3、禁止多行文字框textarea拖拽

這樣按下面新增屬性多行文字框就不能拖拽放大縮小了:

textarea

在這裡要提到乙個屬性resize,這個是css3屬性,用於元素縮放,它可以取以下幾個值:

none 預設值

both 允許水平方向及垂直方向縮放

horizontal 只允許水平方向縮放

vertical 只允許垂直方向縮放

不僅可以針對textarea元素,對大多數元素都適用,如div等,在這裡不一一枚舉,但與textarea不同的是,對div使用時需要加上一句overflow: auto;,也就是這樣才有效果:

div

以上就是關於去除表單瀏覽器預設樣式的一些內容。

Android自帶樣式

android theme android style theme.dialog 將乙個activity顯示為能話框模式 android theme android style theme.notitlebar 不顯示應用程式標題欄 android theme android style theme...

android 自帶樣式

簡單介紹一下android開發中系統自帶的一些樣式 android theme android style theme.dialog 將乙個activity顯示為對話方塊模式 android theme android style theme.notitlebar 不顯示應用程式標題欄 androi...

樣式覆蓋問題

最近做前端使用外源框架,需要對框架本身使用的樣式進行本地調適,這就涉及到了優先的問題。一般,樣式寫在外部檔案,然後引入外部檔案。通過chorme控制台的element工具定位元素樣式,然後複製到外部樣式檔案加以更改即可覆蓋原來的樣式,還可以使用 important使某個css屬性的優先順序提至最高端...