radio怎樣自定義樣式

時間 2019-11-17

標籤 radio 怎樣自定義樣式简体版

原文原文鏈接

但願把本身之前困惑的內容寫出來，若是能幫助到你，我爲此感到開心，謝謝。html

直接進入主題，怎樣自定義radio的樣式？瀏覽器

首先新建一個空白文檔，寫一個性別選擇的單選框,簡單初始化樣式spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width">
    <title>單選框樣式</title>
<style>
    *{margin: 0;padding: 0}
    body{margin: 20% auto 0 5%}
</style>
</head>
<body>
<!--label for 屬性 規定label綁定的表單元素-->
<div>請選擇性別：</div><br>
<label for="male"><input type="radio" name="sex" id="male" value="male">Male</label>
<br>
<label for="female"><input type="radio" name="sex" id="female" value="female">Female</label>
</body>
</html>
複製代碼

備註：
當input標籤外加入<label></label>標籤並添加 label 的 for 屬性與input的ID值一致時，點擊label中的文字，能夠選中radio
否則只能點擊input才能選中這個單選框
你們能夠根據本身項目的需求，選擇合適的寫法，有疑問趕忙寫代碼驗證打假...
複製代碼

接着看一下瀏覽器的顯示效果，瀏覽器會展現一個默認的radio顯示，如圖所示谷歌瀏覽器效果3d

而咱們常常會發現每一個瀏覽器默認的顯示效果各顯不一樣,以下Safari瀏覽器效果，還有不少就不一一例舉了...

So ... 接下來咱們開始radio的樣式美化之路

思路：code

一、首先知道input radio 的默認樣式是在input上
二、添加input選中和不選中的樣式
input[type="radio"][name="sex"]{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
input[type="radio"][name="sex"]:checked{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
三、樣式有了可是應該添加到哪一個元素上的，如今咱們能夠在頁面中插入一對標籤<span></span>,將樣式移植到span上
<label for="male"><input type="radio" name="sex" id="male" value="male"><span></span>Male</label>

input[type="radio"][name="sex"] + span{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
input[type="radio"][name="sex"]:checked + span{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
四、將原來的radio(input)樣式隱藏掉
五、效果是否是好了呢？
複製代碼

效果圖：cdn

所有代碼以下：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width">
    <title>單選框樣式</title>
    <style>
        *{margin: 0;padding: 0}
        body{margin: 20% auto 0 5%}
        label{position: relative;}
        input[type="radio"][name="sex"]{opacity: 1;margin-right: 15px;}
        input[type="radio"][name="sex"] + span{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
        input[type="radio"][name="sex"]:checked + span{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
    </style>
</head>
<body>

<!--label for 屬性 規定label綁定的表單元素-->
<div>請選擇性別：</div><br>
<label for="male"><input type="radio" name="sex" id="male" value="male"><span></span>Male</label>
<br>
<label for="female"><input type="radio" name="sex" id="female" value="female"><span></span>Female</label>
</body>
</html>
複製代碼

以上只是一種定義樣式的方式，你們能夠嘗試不一樣的寫法，好比選中、未選中狀態能夠替換成背景，背景圖片等等或者繼續美化一下樣式；blog

<label for="male">
  <input type="radio" name="sex" id="male" value="male">
  <span></span>
  Male
</label>
是否是還有其餘的結構方式，能夠都嘗試一下。
複製代碼

書上得來終覺淺絕知此事要躬行，立刻動起手來寫一組單選框、多選框的樣式吧，讓咱們的頁面美美噠！圖片

不足、錯誤之處望指出，謝謝！ci

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。