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