CSS-實戰-上傳按鈕美化

java小工匠發表於2017-07-13
CSS

1、實現效果

實現效果

2、實現思路

（1） 建立醜陋的檔案輸入框

醜陋的檔案輸入框

（2）建立美化的DIV

美化後的div

（3）設定醜陋的輸入框透明
（4）使用美化後的DIV遮擋預設輸入框。

div 的父元素設定為相對定位，div元素使用絕對定位。

半透明效果

3、實現程式碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>檔案上傳按鈕美化</title>
    <style type="text/css">
        .upload{
            width: 100px;
            height: 40px;
            position: relative;
            border:1px solid #ccc;
            background:#eee;
            color :#fff;
            text-shadow : none;
            box-shadow :1px 1px 3px rgba(0,0,0,.2)
            cursor:pointer;
        }
     
        .upload{
            width: 84px;
            height: 28px;
            position: relative;
            border:1px solid #00b7ee;
            background:#00b7ee
        }
     
        .txt {
            float: left;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 84px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            color : white;
         
        }
        .file{
            width: 84px;
            height: 28px;
            opacity:0.0;filter:alpha(opacity=0);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="upload">
        <div class="txt">上傳圖片</div>
        <input type="file" class="file" value="上傳檔案">
    </div>
</body>
</html>


相關文章