中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Html單選按鈕自定義樣式

2022-05-26    分類: 網(wǎng)站建設(shè)

  前言:

  某天,寫了一個帶有單選按鈕的界面,突然想起網(wǎng)上其他網(wǎng)站各種各樣的單選按鈕,
遂想"改下這個圓圈圈怎么樣?",于是在找了一遍單選按鈕的樣式,
沒一個說是修改圓圈圈,于是又去網(wǎng)上找了一遍,各種各樣,自己選了其中一種并稍加修改,感覺簡單通俗易懂,
而且最重要的是效果好,故在此和大家分享一下。

  

原理:
    之前已經(jīng)提及,html的單選按鈕沒有提供一個樣式能修改其圓圈,
所以僅靠一句類似"color:#fff"的語句是不可能的,不過考慮:
    (A)html每個input都可以加一個label,點擊label,也會出發(fā)input的點擊:


    (B)label標(biāo)簽可以加背景,并通過其他樣式,讓背景顯示在文字的左邊:           


    (C)input標(biāo)簽可以隱藏:                                


    (D)點擊label后,可以通過JS,修改其背景圖片:

(此處為圖片)

看到這里有沒有恍然大悟,什么自定義單選按鈕的圖標(biāo),
不過是把單選按鈕隱藏了,然后通過每次點擊修改label的背景圖片,
達到自定義的效果,而且后期需要把單選按鈕的圖標(biāo)換成花花草草貓貓狗狗,
也不過是換下圖片而已。如果還不能實現(xiàn),我們接著往下細談:

實現(xiàn):

原理中說的四點,也可以看作實現(xiàn)的自定義單選按鈕的四部曲:

A:沒啥好說的,就是標(biāo)簽使用。

<label for="sex-man" class="radio_label checked"> 
    <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /> 
    男 
</label>

當(dāng)前名稱:Html單選按鈕自定義樣式
網(wǎng)站鏈接:http://m.rwnh.cn/news8/159358.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計小程序開發(fā)、網(wǎng)站設(shè)計公司、ChatGPT、動態(tài)網(wǎng)站、網(wǎng)站維護

廣告

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

手機網(wǎng)站建設(shè)
南澳县| 蓬溪县| 六枝特区| 安岳县| 静海县| 齐齐哈尔市| 仪征市| 昔阳县| 鹤壁市| 祁连县| 布尔津县| 磐石市| 汨罗市| 高陵县| 鄂托克旗| 兴海县| 板桥市| 汨罗市| 水城县| 阳信县| 新闻| 辉县市| 进贤县| 凤山市| 介休市| 韩城市| 澄迈县| 贺兰县| 工布江达县| 德庆县| 临漳县| 正镶白旗| 平顶山市| 聂荣县| 车致| 海伦市| 宁津县| 尤溪县| 宽甸| 体育| 吴江市|