9.使用CSS樣式，自己製作單選框樣式和選中功能

-Advertisement-

自己製作單選框樣式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl ...

自己製作單選框樣式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- reset.css文件內容參考：https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
    <link rel="stylesheet" href="./reset.css">
    <style>
        .radio-diy .radiocircle {
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
        }
        
        .radio-diy input:checked+span {
            border: 1px solid#008c8c;
        }

        .radio-diy input:checked~span {
            color: #008c8c;
        }

        .radio-diy input:checked+span.radiocircle::after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background: #008c8c;
            border-radius: 50%;
            cursor: pointer;
            margin-left: 3px;
            margin-top: 3px;
        }



        input[type="radio"] {
            display: none;
        }
    </style>
</head>

<body>
    請選擇性別：
    <label class="radio-diy">
        <input type="radio" name="gender" value="male">
        <span class="radiocircle"></span>
        <span>男</span>
    </label>
    <label class="radio-diy">
        <input type="radio" name="gender" value="female">
        <span class="radiocircle"></span>
        <span>女</span>
    </label>
</body>

</html>

radio.css

效果展示：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

input 內容改變的觸發事件【轉】

1\. onchange onchange 事件會在域的內容改變時觸發。支持的標簽, , ,。註意：在元素的值改變了且失去焦點時觸發（兩次的值一樣不會觸發）。缺陷：通過js代碼改變DOM的值不會觸發，解決在js代碼里改值了調用其change 的 function() 或者調.change()方法 ...
HTML/CSS中的空格處理\_如何保留頁面中的空格【轉】

HTML中的空格的規則在html中內容中的多個空格一般會被視為一個，連續的多個空格符被自動合併了。同時內容前後的空格也會被清除，如下： ~~~ fly63 com ~~~ 顯示效果為： ~~~ fly63 com ~~~ 備註：瀏覽器的這種機制處理，同樣適用於除了普通的空格鍵，還包括製表符（\\ ...
CSS 禁止選中文本

禁止選中文本 css 寫法 js 寫法禁止滑鼠右鍵 ...
javascript正則表達式：匹配所有html標簽【轉】

在面試的過程中遇到一個這樣的題目：比如有一段HTML字元串：其實匹配html標簽的正則表達式很短，如下： ]+ 就這樣，沒了？是的。你驚訝嗎？這個正則表達式也是收集於網路，但是我可以看懂，首先，html標簽肯定是以符號結束（不管是不是自閉合），只是中間有點糾結，可能有字元，數字，引號，換行符— ...
在vue項目中封裝echarts的正確姿勢

為什麼需要封裝echarts 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置，十分冗餘在同一個項目中，各類圖表設計十分相似，甚至是相同，沒必要一直做重覆工作可能有一些開發者忘記考慮echarts更新數據的特性，以及視窗縮放時的適應問題。這樣導致數據更新了echarts視圖卻沒 ...
前端工程師需要具備哪些基本素質?

眾所周知，前端工程師的首要工作就是開發用戶界面，因此我們可以把前端工程師看做是用戶體驗的把控者。正所謂責任越大能力越大，前端工程師的工作內容也讓這一崗位需要具備更多的能力，除了精通HTML、CSS這樣的基礎知識，對前端要求更高的其實是非技術因素。下麵我們一起來看看前端工程師需要具備哪些基本素質。 1 ...
react axios 跨域訪問一個或多個功能變數名稱

1.react + axios 跨域訪問一個功能變數名稱配置非常簡單，只需要在當前的 package.json 文件裡面配置： "proxy":"http://iot-demo-web-dev.autel.com", //當然，這裡是一個假地址像這樣：這樣跨域便完成了，當然，也可以像網上那樣，多幾段代 ...
Jquery鍵盤輸入

根據上上篇的鍵盤ui界面我添加了一個輸入框讓鍵盤有了輸入效果如下界面代碼可以去上上篇看： https://www.cnblogs.com/2979100039-qq-con/p/12641603.html 這那個代碼基礎上加了一個輸入框，在把鍵盤縮放0.7倍就可以了接下重點是js代碼同樣用的是j ...