input type=radio,自定义为正常按钮样式

最新推荐文章于 2024-01-30 17:08:09 发布
最新推荐文章于 2024-01-30 17:08:09 发布
阅读量471 收藏 6
点赞数 8
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s407602374/article/details/134987444
版权

<style>
/* 隐藏原始的输入框 */
    input[type="radio"] {
        display: none;
    }

    /* 设定自定义按钮样式 */
    .radio-button {
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 8px;
    }

        /* 自定义按钮的选中状态样式 */
        .radio-button .custom-radio-button {
            width: 62px;
            height: 22px;
            background-color: white;
            border: 1px solid #d2d1d1;
            float: left;
            text-align: center;
            line-height: 22px;
        }

        /* 鼠标悬停时的样式，可选 */
        .radio-button:hover .custom-radio-button {
            border-color: #555;
        }

    /* 选中状态时的样式 */
    input[type="radio"]:checked + .custom-radio-button {
        background-color: #d4f1d7;
    }

    /* 禁用状态样式，可选 */
    input[type="radio"]:disabled + .custom-radio-button {
        opacity: 0.6;
        cursor: not-allowed;
    }
</style>

<body>

 <label class="radio-button">
        <input type="radio" name="my-radio" value="1" disabled>
        <span class="custom-radio-button">radio</span>
 </label>
</body>

dddddd11111133333
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
利用css3修改input[type=radio]样式
人间草木
06-03 5678
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X...
自定义 input[type=radio] 样式
suwyer的博客
08-21 7574
input[type=radio] 原生的单选框样式和原生的复选框样式是一样的不美观，而通常设计过程中，为了契合产品风格，也会将这些组件样式设计的很漂亮，但是直接修改原生的样式，会发现只可以设置少数的样式，其余样式并没有效果。 因此，我们就需要自定义 radio 的个性化样式 ，来契合产品的漂亮风格了。 我这里简单的介绍两种CSS实现的方式： 两种方式都使用表单元素中的 label 元素和f...
【CSS】单选框的默认样式修改-----input type=‘radio’
m0_61486963的博客
08-08 1711
# 使用css 修改 `` 单选框的默认样式
JS中设置input的type="radio"默认选中
热门推荐
weixin_30628077的博客
06-15 1万+
html: <input id="Radio1" type="radio" value="男" name="st_Sex" checked="checked"/>男 <input id="Radio2" type="radio" value="女" name="st_Sex" />女 js: $("#Radio1...
实现css修改input[type=radio]样式
最新发布
ITSYDWJ的博客
01-30 573
【代码】实现css修改input[type=radio]样式。
input radio 自定义css样式
gyq04551的博客
08-22 3270
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;style&gt; input[type=&
自定义input[type=radio]单选框样式
蓝莓的博客
01-17 5053
一般默认的input[type=radio]单选框样式都比较简陋，如何自定义自己喜欢的样式呢？下面来接单介绍一种。
原生javascript自定义input[type=radio]效果示例
12-08
通常，原生的HTML radio按钮样式较为简单，但通过CSS和JavaScript，我们可以创建出更加美观且符合品牌风格的自定义效果。 首先，让我们看看CSS部分。在提供的代码片段中，我们看到CSS主要应用于`input[type="radio...
html中radio按键改button,自定义原生单选按钮input[type="radio"]样式的两种方式
weixin_29605297的博客
06-26 1330
原生单选按钮input[type=="radio"]的样式总是不那么友好，在不同的浏览器中表现不一。我们可以借助伪类来实现。一、 控件与label 并列是否展示思路1、可以为元素添加生成性内容(伪元素)，用其来设置单选按钮的样式。2、把真正的单选按钮隐藏起来。代码1、给label标签添加伪类需要注意的是，选中时使用background-clip裁剪内容时，padding会让内容撑大，故width、...
html 自定义input样式,HTML5中input[type='date']自定义样式
weixin_36410141的博客
07-09 1593
HTML5提供了日历控件功能，缩减了开发时间，但有时它的样式确实不如人意，我们可以根据下面的代码自行修改。建议：复制下面的代码段，单独建立一个css文件，方便我们修改。/* 修改日历控件类型 */::-webkit-datetime-edit { padding: 1px;} /*控制编辑区域的*/::-webkit-datetime-edit-fields-wrapper { backgro...
html input radio样式修改,利用CSS 修改input=radio的默认样式(改成选择框)
weixin_34392923的博客
06-03 1387
html部分：abel for属性规定与表单元素绑定radio单选框， 相同的name名字可以达到互斥的作用CSS部分：input[type="radio"] {opacity:; //设置透明度，隐藏原有input样式}label {position: absolute;left: 90%;top: 10px;width: 20px;height: 20px;border: 1px solid ...
自定义input[type="radio"]的样式
KleyChan的博客
09-19 2977
对于表单，input[type=“radio”] 的样式总是不那么友好，在不同的浏览器中表现不一。 对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一...
如何自定义INPUT RADIO样式
superw的博客
12-07 760
做一个小项目，不想用第三方插件。自己手写美化一个单选框，下面说下思路。 1.把默认显示的设置为隐藏 2.利用CSS：after属性自定义想显示成的样子 下面把代码发出来 input[type=radio]{ visibility: hidden;display: inline-block; margin-right: .2rem; } input[type=radio]:checked::after{ background-image: url('../img/choujiang/rpu
＜input type=“radio“＞
qq_34823218的博客
08-13 9824
一JS中设置input的type="radio"默认选中 html: <input id="Radio1" type="radio" value="男" name="st_Sex" checked="checked"/>男 <input id="Radio2" type="radio" value="女" name="st_Sex" />女 js: $("#Radio1")...
17、HTML单选按钮
you can you up up up的博客
10-30 8181
单选按钮在网页中很常见。用户只能选择男或女中的一种，此时选用单选按钮再合适不过了。 在 HTML 中，把 <input> 标签的 type 属性设置为 radio 可以表示单选按钮。具体语法格式如下： <input type="radio" /> 同单行文本框和密码框一样，单选按钮要想被正确提交，也必须设置 name 属性。除了 name 属性之外，单选按钮还有几个其它属性，我们来看一下。 1. 单选按钮其它属性 单选按钮的其它属性： checked ----用来规定在页面加载时
将html的radio单选框自定义样式为正方形和对号
_小郑有点困了的博客
12-13 1322
改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。
html单选按钮 状态,HTML input radio 单选按钮简介说明
weixin_42524004的博客
05-31 5484
摘要:下文讲述html代码中input type=’radio’时的相关属性简介说明,如下所示:input type=’radio’ 简介当input标签中type=’radio’时,即可创建一个单选按钮单选按钮注意事项:在一个html页面中,一组具有相同name属性值的radio按钮，同时有且只有一个radio按钮被选中(当我们点选一个radio时，其它name相同的radio单选框会自动变为非...
如何修改input中[type="radio"]和[type="checkbox"]的样式
Abbey_qi的博客
08-14 2334
一、利用css3伪元素实现样式修改 思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于复选框的状态来为其设置样式； 2. 然后把真正的复选框隐藏起来； 3. 最后把生成内容美化一下。 解决方法： 美化checkbox 1. 一段简单的结构代码： <input type="checkbox" id="awesome" /> <lab...
前端打印时候，input设置type=radio,如何更改radio样式
03-26
可以使用CSS来自定义radio的样式。以下是一种常见的方法： 1. 首先，隐藏原来的radio按钮： ```css input[type=radio] { opacity: 0; position: absolute; pointer-events: none; } ``` 2. 然后，添加自定义的样式，比如圆形或方形： ```css input[type=radio] + label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; border-radius: 50%; border: 2px solid #CCC; } input[type=radio] + label:before { border-radius: 0; } input[type=radio] + label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; border: 2px solid #CCC; } input[type=radio] + label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; border: 2px solid #CCC; } input[type=radio]:checked + label:before { background-color: #CCC; } ``` 这里设置了圆形和方形的样式，可以根据需要修改。 3. 最后，将label与input关联起来，确保点击label时可以选择对应的radio按钮： ```html <input type="radio" id="radio1" name="radios"> <label for="radio1">Radio 1</label> ``` 以上就是一种常见的自定义radio样式的方法。当然，也可以使用第三方库如Bootstrap来快速设置样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值