虛擬主機域名注冊-常見問題網絡編程問題CSS/HTML

input type=file 樣式美化方法

我們在做input文本上傳的時候,html自帶的上傳按鈕比較丑,如何對其進行美化呢?同理:input checkbox美化,input radio美化是一個道理的,后面文章會總結。

思路:

input file上傳按鈕的美化思路是,先把之前的按鈕透明度opacity設置為0,然后,外層用div包裹,就實現了美化功能。

代碼如下:

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">點擊這里上傳文件
</a>

<a href="javascript:;" class="file">選擇文件
    <input type="file" name="" id="">
</a>

CSS樣式一:

/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

CSS樣式二:

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

效果圖片:



來源:
閱讀:2657
日期:2017-09-16

【 字體: 】 
上一篇:ck編輯器按鈕后面顯示文字的方法
下一篇:禁止文字選中兼容IE/Chrome等瀏覽器 css方法
  >> 相關文章
 
發表評論

字數0
請輸入驗證碼:


  • 尊重網上道德,遵守中華人民共和國的各項有關法律法規
  • 承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
  • 本站管理人員有權保留或刪除其管轄留言中的任意內容
  • 本站有權在網站內轉載或引用您的評論
  • 參與本評論即表明您已經閱讀并接受上述條款
網友評論
沒有相關評論。
會員 客服 QQ 電話 充值 工單
Top

24小時客服熱線

咨詢售后問題請進入 工單提問

柬埔寨虚拟货币交易所 内蒙古快3开奖号码 广西快乐十分追号技巧 秒速时时走势图软件 天下彩免费资料报剎大全 重庆时时彩开奖号码提取软件 pc蛋蛋走势神测网 湖北快三开奖视频直播 白姐统一图库彩色 安徽时时是真的么 排列5开奖公告