成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

修改radio、checkbox和select默認(rèn)樣式

mumumu / 1733人閱讀

摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然已經(jīng)不能滿足需求。兼容更低版本瀏覽器的樣式修改最后附上演示鏈接修改和默認(rèn)樣式

現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然已經(jīng)不能滿足需求。趁著這次開發(fā)的頁面中有這方面的需求，在這里整理一下修改radio、checkbox、select的方法。
radio and checkbox

修改radio的默認(rèn)樣式有兩種常用的方法

純CSS

此方法需借助CSS3，關(guān)鍵CSS代碼如下

.demo1 input[type="radio"],.demo1 input[type="checkbox"]{
    display:none; 
}
.demo1 label:before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 16px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #3797fc;
}
.demo1 input[type="radio"] + label:before{
     border-radius: 8px;
}
.demo1 input[type="checkbox"] + label:before{
     border-radius: 3px;
}
.demo1 input[type="radio"]:checked+label:before{
    content: "2022";
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 19px;
}
.demo1 input[type="checkbox"]:checked+label:before{
    content: "2713";
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 17px;
}

優(yōu)點：充分借助了CSS3的優(yōu)勢，無需使用js和圖片，僅用純CSS3就可搞定

缺點：兼容性較差，僅支持IE9+

js+圖片

js代碼：

$(function(){
    $(".demospan").bind("click",function(){
        $(this).addClass("on").siblings().removeClass("on");
    })

    $(".piaochecked").bind("click",function(){
        $(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");
        // $(this).toggleClass("on_check");
    })
})

css代碼

.demospan{
    display: inline-block;
    width: 24px;
    height: 18px;
    /*float: left;*/
    padding-top: 3px;
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
    background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/inputradio.gif);
    background-repeat: no-repeat;
    background-position: -24px 0;
}
.demo21{
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}
.on{
    background-position: 0 0;
}
.piaochecked{
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 10px;
    text-align: center;
    background-image:  url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/checkbox_01.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.on_check{
    background-position: 0 -21px;
}
.cbdemo2{
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
    filter:alpha(opacity=0);
}

優(yōu)點：兼容性高，支持IE6+

缺點：使用js+圖片較為麻煩

select 
/*select*/
 .select select{
    /*復(fù)寫Chrome和Firefox里面的邊框*/
     border:1px solid  green;
     /*清除默認(rèn)樣式*/
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;
/*在選擇框的最右側(cè)中間顯示小箭頭圖片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
  padding-right: 14px;
 }
 /*清除ie的默認(rèn)選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }

該方法關(guān)鍵在于清除默認(rèn)樣式，使用css3的appearance屬性，但是兼容性較差，僅支持IE9+。若要兼容低版本瀏覽器，可以使用Div進(jìn)行模擬。

//Todo

兼容更低版本瀏覽器的select樣式修改

最后附上演示鏈接：修改radio、checkbox和select默認(rèn)樣式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86281.html

相關(guān)文章

  • 總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

    摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...

    asce1885 評論0 收藏0

  • 總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

    摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...

    Anshiii 評論0 收藏0

  • js原生操作select、radio 、checkbox

    摘要：常見操作常見操作常見操作常見操作代碼下拉框單選框多選框代碼常見操作常見操作獲取選中值第一種通過對象獲取第二種通過選中的下標(biāo)來獲取獲取獲取選中文本值通過選中的下標(biāo)來獲取選中文本值設(shè)置選中項知道的值或者下標(biāo)或者文本值下面代碼只列出根據(jù)來選中獲取 select、radio 、checkbox常見操作 select常見操作 radio常見操作 select常見操作 html代碼 ...

    CoorChice 評論0 收藏0

  • js原生操作select、radio 、checkbox

    摘要：常見操作常見操作常見操作常見操作代碼下拉框單選框多選框代碼常見操作常見操作獲取選中值第一種通過對象獲取第二種通過選中的下標(biāo)來獲取獲取獲取選中文本值通過選中的下標(biāo)來獲取選中文本值設(shè)置選中項知道的值或者下標(biāo)或者文本值下面代碼只列出根據(jù)來選中獲取 select、radio 、checkbox常見操作 select常見操作 radio常見操作 select常見操作 html代碼 ...

    HitenDev 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<