成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

利用css3修改input[type=radio]樣式

Jrain / 1313人閱讀

摘要：利用修改樣式做項目的時候需要使用單選按鈕，但是默認(rèn)的樣式與設(shè)計不一致所以需要修改默認(rèn)的樣式，如下圖。不想使用圖片，所以利用的重新實現(xiàn)了一遍。

利用css3修改input[type=radio]樣式

做項目的時候需要使用單選按鈕input[type=radio]，但是默認(rèn)的樣式與UI設(shè)計不一致,所以需要修改默認(rèn)的樣式，如下圖。搜索的時候發(fā)現(xiàn)有一些實現(xiàn)是利用背景圖實現(xiàn)。不想使用圖片，所以利用css3的重新實現(xiàn)了一遍。在ie8下無效。

原理 
利用標(biāo)簽與對應(yīng)的關(guān)聯(lián),給設(shè)置透明,使用position(定位)讓用戶看到的是標(biāo)簽的樣式,點擊時會選擇到對應(yīng)的,使用的:checked偽類選擇器來改變選中的樣式.
實現(xiàn)代碼
html

    

        
        
        選項一
    

    

        
        
        選項二
css 
        div {
            position: relative;
            line-height: 30px;
        }
        
        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }
        
        label {
            position: absolute;
            left: 5px;
            top: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }
        
        /*設(shè)置選中的input的樣式*/
        /* + 是兄弟選擇器,獲取選中后的label元素*/
        input:checked+label { 
            background-color: #fe6d32;
            border: 1px solid #fe6d32;
        }
        
        input:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }
dome

鏈接：http://runjs.cn/code/hmevb9gs

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/50772.html

相關(guān)文章

  • 利用css3修改input[type=radio]樣式

    摘要：利用修改樣式做項目的時候需要使用單選按鈕，但是默認(rèn)的樣式與設(shè)計不一致所以需要修改默認(rèn)的樣式，如下圖。不想使用圖片，所以利用的重新實現(xiàn)了一遍。 利用css3修改input[type=radio]樣式 做項目的時候需要使用單選按鈕input[type=radio]，但是默認(rèn)的樣式與UI設(shè)計不一致,所以需要修改默認(rèn)的樣式，如下圖。搜索的時候發(fā)現(xiàn)有一些實現(xiàn)是利用背景圖實現(xiàn)。不想使用圖片，所以利...

    Berwin 評論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...

    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

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

    摘要：現(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...

    mumumu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<