純css如何實(shí)現(xiàn)選框選中效果-創(chuàng)新互聯(lián)

小編給大家分享一下純css如何實(shí)現(xiàn)選框選中效果，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

鳳山網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,鳳山網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為鳳山上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的鳳山做網(wǎng)站的公司定做！

選擇器介紹：

1、“+”：如 div + p    選擇緊接在 <div> 元素之后的所有 <p> 元素。

2、:checked ：如 input:checked 單選框和復(fù)選框的選中狀態(tài)。

實(shí)現(xiàn)代碼：

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            標(biāo)簽1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            標(biāo)簽2
        </label>
    </div>

實(shí)現(xiàn)效果：

這情況主要用于 type=“checkbox，radio”的input 自定義選中樣式的。

看完了這篇文章，相信你對(duì)純css如何實(shí)現(xiàn)選框選中效果有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文標(biāo)題：純css如何實(shí)現(xiàn)選框選中效果-創(chuàng)新互聯(lián)
本文路徑：http://www.muchs.cn/article40/dssceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、微信小程序、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)