如何用css樣式去掉默認(rèn)設(shè)備或者瀏覽器的默認(rèn)樣式

手機(jī)設(shè)備下的界面

目前創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、臺(tái)州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

正常瀏覽器下的html5界面

要解決該問題需要加入一些css樣式,如下：

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

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

如果還有圓角的問題，

.button{ border-radius: 0; }

在寫表單時(shí)候會(huì)發(fā)現(xiàn)一些瀏覽器對(duì)表單賦了默認(rèn)的樣式，如在谷歌瀏覽器下，文本框和下拉選擇框當(dāng)載入焦點(diǎn)時(shí)，會(huì)出現(xiàn)發(fā)光的邊框！文本框textarea可以自由拖拽拉大！在IE10下，文本框輸入內(nèi)容后，會(huì)在右側(cè)出現(xiàn)一個(gè)小叉叉。面對(duì)這些問題，下面來看看解決方法。

去除谷歌等瀏覽器文本框默認(rèn)發(fā)光邊框

input:focus, textarea:focus {

outline: none;

}

去掉高光樣式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;

}

也可以重新根據(jù)自己的需要設(shè)置一下，如：

input:focus,textarea:focus {

outline: none;

border: 1px solid #f60;

}

這樣的話，當(dāng)文本框載入焦點(diǎn)時(shí)，邊框顏色就會(huì)變?yōu)槌壬?，增?qiáng)用戶體驗(yàn)！

去除IE10+瀏覽器文本框后面的小叉叉

input::-ms-clear {

display: none;

}

禁止多行文本框textarea拖拽

添加屬性多行文本框就不能拖拽放大縮小了：

textarea {

resize: none;

}

如何去掉列表的默認(rèn)樣式

新建一個(gè)html文件，命名為test.html，用于講解css如何清除li列表默認(rèn)樣式。

請(qǐng)點(diǎn)擊輸入圖片描述

在test.html文件內(nèi)，使用ul、li標(biāo)簽創(chuàng)建一個(gè)列表。

請(qǐng)點(diǎn)擊輸入圖片描述

在test.html文件內(nèi)，設(shè)置ul標(biāo)簽的class屬性為mycss。

請(qǐng)點(diǎn)擊輸入圖片描述

在css標(biāo)簽內(nèi)，通過class設(shè)置ul的樣式，將list-style屬性設(shè)置為none，消除列表的默認(rèn)序號(hào)。

請(qǐng)點(diǎn)擊輸入圖片描述

在css標(biāo)簽內(nèi)，再將padding屬性和margin屬性消除li列表的內(nèi)外邊距。

請(qǐng)點(diǎn)擊輸入圖片描述

6

在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的效果。

請(qǐng)點(diǎn)擊輸入圖片描述

【css】通配符選擇器&清除瀏覽器默認(rèn)樣式

寫法：*{}

星號(hào)即為通配符選擇器，寫在其中的樣式會(huì)應(yīng)用頁(yè)面到所有的元素中，所以使用的頻率并不高，主要用于清除瀏覽器默認(rèn)樣式。

在使用各種元素的過程中，我們會(huì)發(fā)現(xiàn)很多元素都是有默認(rèn)樣式的，比如body標(biāo)簽有默認(rèn)的padding值和margin值，h1和p標(biāo)簽有默認(rèn)的行高字號(hào)，margin值，a標(biāo)簽有默認(rèn)的下劃線，列表前面有小圓點(diǎn)等等，常常會(huì)干擾我們進(jìn)行頁(yè)面的編寫，所以我們可以事先使用通配符選擇器進(jìn)行瀏覽器默認(rèn)樣式清除。

更精準(zhǔn)的清除方法

剛剛我們使用的通配符選擇器，會(huì)給所有元素都設(shè)置一遍默認(rèn)樣式，解析的工作量會(huì)比較大，所以我們可以根據(jù)我的頁(yè)面里到底有哪些元素需要清除，使用群組選擇器寫出更精確的清除默認(rèn)樣式css，如：

可以把它寫入一個(gè)外部樣式表reset.css，如果需要清除直接導(dǎo)入就可以啦。

1、清除在編寫頁(yè)面中由于瀏覽器默認(rèn)樣式帶來的干擾。

2、兼容性更好，不同瀏覽器的默認(rèn)樣式可能會(huì)有所不同，如果不清楚可能會(huì)造成我們編寫的頁(yè)面在不同瀏覽器上的效果有所出入。

選擇器部分文章：

選擇器介紹（一）標(biāo)簽選擇器、id選擇器、類選擇器

選擇器介紹（二）后代選擇器，子代選擇器，交集選擇器，并集（群組）選擇器

通配符選擇器清除瀏覽器默認(rèn)樣式

css 蘋果手機(jī)按鈕默認(rèn)樣式如何去掉

只要在樣式里面加一句去掉css去掉iPhone、iPad的默認(rèn)按鈕樣式就可以了。 （不要寫在class里哦）

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea {??-webkit-appearance: none;}

如果還有圓角的問題，

.button{?border-radius: 0;?}

1、去除Chrome等瀏覽器文本框默認(rèn)發(fā)光邊框

input:focus, textarea:focus {outline:?none;}

去掉高光樣式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;}

當(dāng)然這樣以來，當(dāng)文本框載入焦點(diǎn)時(shí)，所有瀏覽器下的文本框的邊框都不會(huì)有顏色上及樣式上的變化了，這樣的話，當(dāng)文本框載入焦點(diǎn)時(shí)，邊框顏色就會(huì)變?yōu)槌壬o用戶一個(gè)反饋。

2、去除IE10+瀏覽器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display:?none;}

css去掉瀏覽器默認(rèn)樣式

/**?清除內(nèi)外邊距?**/

body,?h1,?h2,?h3,?h4,?h5,?h6,?hr,?p,?blockquote,?/*?structural?elements?結(jié)構(gòu)元素?*/

dl,?dt,?dd,?ul,?ol,?li,?/*?list?elements?列表元素?*/

pre,?/*?text?formatting?elements?文本格式元素?*/

form,?fieldset,?legend,?button,?input,?textarea,?/*?form?elements?表單元素?*/

th,?td?/*?table?elements?表格元素?*/?{

margin:?0;

padding:?0;

}

/**?設(shè)置默認(rèn)字體?**/

body,

button,?input,?select,?textarea?/*?for?ie?*/?{

font:?14px/1.5?tahoma,?\5b8b\4f53,?sans-serif;

}

h1,?h2,?h3,?h4,?h5,?h6?{?font-size:?100%;?font-weight:?normal;}

address,?cite,?dfn,?em,?var?{?font-style:?normal;?}?/*?將斜體扶正?*/

code,?kbd,?pre,?samp?{?font-family:?courier?new,?courier,?monospace;?}?/*?統(tǒng)一等寬字體?*/

small?{?font-size:?12px;?}?/*?小于?12px?的中文很難閱讀,?讓?small?正?；?*/

/**?重置列表元素?**/

ul,?ol?{?list-style:?none;?}

/**?重置文本格式元素?**/

a?{?text-decoration:?none;?}

a:hover?{?text-decoration:?underline;?}

sup?{?vertical-align:?text-top;?}?/*?重置,?減少對(duì)行高的影響?*/

sub?{?vertical-align:?text-bottom;?}

/**?重置表單元素?**/

legend?{?color:?#000;?}?/*?for?ie6?*/

fieldset,?img?{?border:?0;?}?/*?img?搭車：讓鏈接里的?img?無邊框?*/

button,?input,?select,?textarea?{?font-size:?100%;?}?/*?使得表單元素在?ie?下能繼承字體大小?*/

/*?注：optgroup?無法扶正?*/

/**?重置表格元素?**/

table?{?border-collapse:?collapse;?border-spacing:?0;?}

/*?重置?HTML5?元素?*/

article,?aside,?details,?figcaption,?figure,?footer,header,?hgroup,?menu,?nav,?section,

summary,?time,?mark,?audio,?video?{

display:?block;

margin:?0;

padding:?0;

}

mark?{?background:?#ff0;?}

理念：

1. reset 的目的不是清除瀏覽器的默認(rèn)樣式, 這僅是部分工作. 清除和重置是緊密不可分的.

2. reset 的目的不是讓默認(rèn)樣式在所有瀏覽器下一致, 而是減少默認(rèn)樣式有可能帶來的問題.

3. reset 期望提供一套普適通用的基礎(chǔ)樣式. 但沒有銀彈, 推薦根據(jù)具體需求, 裁剪和修改后再使用.

新聞名稱：css去除默認(rèn)樣式,css禁用樣式
URL標(biāo)題：http://jinyejixie.com/article48/dsdgihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、商城網(wǎng)站、虛擬主機(jī)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)