广告位联系
返回顶部
分享到

将html的radio单选框自定义样式为正方形和对号的教程

xml/xslt 来源:互联网 作者:佚名 发布时间:2023-12-15 22:05:29 人浏览
摘要

将html的radio单选框自定义样式为正方形和对号 背景: 如何能把html的input type=radio name=option改成自定义的样式呢?比如想要把他变成正方形,选中的时候是对号。默认的样式太丑了 默认

将html的radio单选框自定义样式为正方形和对号

背景:

如何能把html的<input type="radio" name="option">改成自定义的样式呢?比如想要把他变成正方形,选中的时候是对号。默认的样式太丑了

默认样式:

在这里插入图片描述

自定义样式:

在这里插入图片描述

实现代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html>

<head>

<style>

input[type="radio"] { 

  display: none;

.square-radio { 

    display: flex;

  position: relative; 

  width: 20px; 

  height: 20px; 

  border: 2px solid #333;

  cursor: pointer;

.square-radio::after { 

  content: "?"; 

  position: absolute; 

  top: 50%; 

  left: 50%; 

  transform: translate(-50%, -50%);  

  font-size: 14px; 

  color: #333; 

  display: none;

input[type="radio"]:checked + .square-radio::after { 

  color: #2196F3; 

  display: block;

}

</style>

</head>

<body>

<div class="box">

    性别:

    <label> 

        男

        <input type="radio" name="option"> 

        <span class="square-radio"></span> 

    </label>

    <label> 

        女

        <input type="radio" name="option"> 

        <span class="square-radio"></span> 

    </label>

</div>

</body>

</html>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • 靠我们自己的力量把IE6推向灭亡

    靠我们自己的力量把IE6推向灭亡
    其实我们天天在想到底哪一天IE6才会真正死去,但是从2001年发布以来,IE6一直统治着国内的浏览器市场,直到现在还占据着国内50%以上的浏
  • 将html的radio单选框自定义样式为正方形和对号的

    将html的radio单选框自定义样式为正方形和对号的
    将html的radio单选框自定义样式为正方形和对号 背景: 如何能把html的input type=radio name=option改成自定义的样式呢?比如想要把他变成正方形,
  • MIME类型中application/xml与text/xml的区别介绍
    RFC2376文档 定义了application/xml 和 text/xml 媒体类型。 RFC7303文档 也定义了application/xml 媒体类型。 RFC3023文档 一次定义了application/xml 和 text/x
  • Element UI里的autosize textarea设置高度方法
    把Element UI里的textarea input设置为autosize之后,文本框的默认高度为33,并不符合设计 默认样式 在浏览器中查检元素,发现 高度是由textarea的
  • 详解XML中的标签与元素的如何使用
    本篇文章给大家介绍XML中的标签与元素的如何使用 标签 我们来了解一下 XML 最重要的部分之一,XML 标签。XML 标签是 XML 的基
  • 解析XML中的DTD文档类型定义
    XML 文档类型定义,俗称 DTD,它是一种准确描述 XML 语言的方式。DTDs 根据适当 XML 语言的语法规则检查 XML 文档的词汇和结构的有效性。 XM
  • XML编程中的模式定义XSD的详解
    XML 模式通常被称为 XML 模式定义(XSD)。它被用来描述和验证 XML 数据的结构和内容。XML 模式定义元素,属性和数据类型。模式元素也支持
  • 解析XML中的树形结构与DOM文档对象模型
    树结构 XML 文档始终是描述性的。树状结构通常被称为 XML 树,它在描述 XML 文档的过程中扮演一个重要的角色。 这个树结构包含根(父)元
  • 简单了解XML中的命名空间
    命名空间就是一组唯一名称。命名空间是确定哪个元素和属性名可以被分配到某个组的一种机制。命名空间通过 URI(统一资源标示符)识别
  • 简介XML文档的阅读与编辑
    这篇文章主要介绍了XML文件的阅读与编辑,最常用的工具当然还是浏览器中的控制台与源代码查看,需要的朋友可以参考下 阅读器 以使用简单
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计