前端開發(fā)之CSS實現(xiàn)input上傳按鈕美化（兼容各瀏覽器）

直以來，input 上傳按鈕對前端人員來說就是個頭痛的事情，因為它不像 input 輸入框這樣，可以輕松的用 css 樣式來實現(xiàn)自定義樣式，而 input 上傳按鈕這個產(chǎn)物我們要怎么美化呢，今天跟大家分享一個純CSS美化上傳按鈕的方法，最主要是還兼容各大瀏覽器，先看效果：

運行效果

css樣式

html代碼

從上面代碼中可以看到，這里我用的美化方法就是利用a標(biāo)簽把這個上傳按鈕包起來，再配合相對定位和絕對定位把上傳按鈕給隱藏起來，以達(dá)到自定義樣式，經(jīng)小編測試，這個方法可以兼容到各種瀏覽器，包括該死的IE6，有需求的網(wǎng)友可以測試一下。

謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過程中遇到問題可以在評論區(qū)提問或者直接私信我，我會定期回復(fù)，碼農(nóng)劉小橋與你一起學(xué)習(xí)，共同進(jìn)步。

廓線(outstyle)

比較常見于表單和鏈接等。

outline-style:none; 取消谷歌、360等藍(lán)色邊框

:focus 獲得焦點的狀態(tài), 鼠標(biāo)的光標(biāo)就是焦點

.username:focus{ /*獲得焦點的狀態(tài)*/
    border:1px dashed pink;
    background-color:#FFF7FB;
    color:pink;
}

取消表單邊框

因為表單在不同瀏覽器里面, 以后不同的顯示方式。

所以, 一般情況下, 我們會把所有的表單都去掉邊框。

border: 0 none; 兼容性更好的寫法

Label 標(biāo)簽

<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="請輸入..." />

這樣, 我們點擊搜索一下, 光標(biāo)就跳到了相應(yīng)id的 input 里面了

完整實例:

TML5的結(jié)構(gòu)化標(biāo)簽，對搜索引擎更友好

li 標(biāo)簽對不利于搜索引擎的收錄，盡量少用

banner圖片一般擁有版權(quán)，不需要搜索引擎收錄，因此可以使用ul + li

<samp></samp>可用于淺色副標(biāo)題

display:inline-block; 每個導(dǎo)航塊存在水平間隙，解決方法是在父元素上添加font-size:0;

sublime安裝csscomb插件

選中css代碼，ctrl+shift+c 自動整理好代碼

排序前：

排序后：

此時存在多余的空行

解決方法：

安裝cssformat插件，對代碼執(zhí)行edit->cssformat->expanded 即可刪除空行

選中單句樣式前面的空白部分（即tab空位）

然后alt+f3 會統(tǒng)一選中所有tab留白

按一次刪除，再按一次刪除，再空一格

此時這個效果：

然后按向下箭頭，按向左箭頭，按刪除一次，再加個空格

此時效果

再向下箭頭，再刪除

此時效果

css樣式代碼美化完畢。

新標(biāo)簽元素的瀏覽器兼容解決：

header,nav,section,aside,article,footer{display: block;}

最后曬出所有代碼

index.html

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#"><img src="cat-little.jpg"></a>
            <nav>
                <a href="#" class="active">導(dǎo)航</a>
                <a href="#">導(dǎo)航</a>
                <a href="#">導(dǎo)航</a>
                <a href="#">導(dǎo)航</a>
                <a href="#">導(dǎo)航</a>
            </nav>
        </div>
    </header>

    <section class="banner">
        <ul>
            <li class="left"><img src="banner1.jpg"></li>
            <li class="active"><img src="banner3.jpg"></li>
            <li class="right"><img src="banner2.jpg"></li>
        </ul>
    </section>

    <section class="main">
        <aside>
            <h1>左邊<samp>標(biāo)題</samp></h1>
            <dl>
                <dt>小標(biāo)題</dt>
                <dd class="text">文字內(nèi)容哦~</dd>
                <dd class="pic"><img src="p1.jpg"></dd>
            </dl>
            <dl>
                <dt>小標(biāo)題</dt>
                <dd class="text">文字內(nèi)容哦~</dd>
                <dd class="pic"><img src="p2.jpg"></dd>
            </dl>
            <dl>
                <dt>小標(biāo)題</dt>
                <dd class="text">文字內(nèi)容哦~</dd>
                <dd class="pic"><img src="p3.jpg"></dd>
            </dl>
        </aside>
        <article>
            <h1>右邊<samp>標(biāo)題</samp></h1>
            <p>這是右邊文章內(nèi)容哦~</p>
            <img src="qrt.jpg">
            <p>這是右邊文章內(nèi)容哦~</p>
        </article>
    </section>

    <footer>
        <div class="container">
            <p>版權(quán)信息</p>
            <span>
                <img src="b1.jpg">
                <img src="b2.jpg">
                <img src="b3.jpg">
            </span>
        </div>        
    </footer>
</body>
</html>

style.css

* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}

/*瀏覽器兼容解決*/
header,nav,section,aside,article,footer{display: block;}

/*頭部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}

/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0;    /*設(shè)置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設(shè)置在左邊*/ left: 0;}
.banner ul li.right { /*設(shè)置在右邊*/ right: 0;}

/*主體部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}

/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */

效果圖

原文鏈接：https://www.cnblogs.com/chenyingying0/p/12250255.html

喜歡小編的可以點個贊關(guān)注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準(zhǔn)備了新出的前端編程學(xué)習(xí)資料，免費分享給大家！

如果你也想學(xué)習(xí)前端，可以觀看【置頂】文章。也可以私信【1】領(lǐng)取最新前端練手實戰(zhàn)項目

在線咨詢

上一篇：Html5網(wǎng)站的特點有哪些？
下一篇：html開發(fā)筆記08- 字體樣式與顏色（標(biāo)簽的屬性）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端開發(fā)之CSS實現(xiàn)input上傳按鈕美化（兼容各瀏覽器）

您的項目需求