利用css3修改input[type=radio]样式

<form>
    <div>
        <input id="item1" type="radio" name="item" value="选项一" checked>
        <label for="item1"></label>
        <span>选项一</span>
    </div>
    <div>
        <input id="item2" type="radio" name="item" value="选项二">
        <label for="item2"></label>
        <span>选项二</span>
    </div>
</form>

  

div {
            position: relative;
            line-height: 30px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 5px;
            top: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked+label {
            background-color: #fe6d32;
            border: 1px solid #fe6d32;
        }

        input:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }

  源码链接:http://runjs.cn/code/hmevb9gs

时间: 2024-08-26 23:36:47

利用css3修改input[type=radio]样式的相关文章

input[type=&quot;radio&quot;]自定义样式

input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3.绘制我们的样式. 首先,我们准备了一个简单的选中样式,看图: 下面我们看看怎么实现 1.label 我们都知道,label可以和input关联,达到点击label就触发input的效果. 既然这样,我们就要充分的利用它. <label for="cat" class="ra

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

如何更改 iOS 和安卓浏览器上的 input[type=&quot;radio&quot;] 元素的默认样式?

Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根本不知道如何使用. 还有-webkit-appearance:none;属性会直接将input[type="radio"]元素隐藏. 应该如何更改?我的目标只是一个选中时是纯色的圆形,未选中时是带边框的透明圆形. 还可用css伪类写 <h3>CSS3 Custom radio&

自定义input[type=&quot;radio&quot;]的样式

对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: html: <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label>

修改手机端radio 样式

实现手机端radio样式修改 http://www.iconfont.cn/搜索对勾图片和圆圈图,分别命名为radio.png 和 select.png 填写自己要的颜色,点击下载png,一般人都会 <span class="address-radio checked"></span> <input type="radio" name="address" class="hide"> .add

&lt;input type=&quot;radio&quot; &gt;与&lt;input type=&quot;checkbox&quot;&gt;值得获取

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html> <html> <head> <meta http-equiv="content-

jQuery操作&lt;input type=&quot;radio&quot;&gt;

jQuery操作<input type="radio"> <input type="radio">如下: 1 2 3 4 5 <input type="radio" name="city" value="BeiJing">北京 <input type="radio" name="city" value="TianJi

点击文字,把input type="radio"也选中

1. <label> <input type="radio" name="radiobutton" value="radiobutton" />测试? </label> 2. <label for="radiobutton"> <input type="radio" name="radiobutton" id="radiob

jquery 获取 input type radio checked的元素

.find('input:radio:checked'):.find("input[type='radio']:checked");.find("input[name='radio']:checked");.find("input[@name='radio'][checked]");.find("input[name='radio']").filter(':checked');