自定义单选框样式方法

自定义单选框样式方法元素的初始样式都不怎么好看,我们一般修改样式会想到直接在那元素上添加样式,比如background、border等,在大多数元素上是可以这么做,但当遇上了单选框会毫无反应。例:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF

大家好,又见面了,我是你们的朋友全栈君。

元素的初始样式都不怎么好看,我们一般修改样式会想到直接在那元素上添加样式,比如background、border等,在大多数元素上是可以这么做,但当遇上了单选框会毫无反应。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style无法直接修改单选框样式</title>
    <style> .radio{ 
     width: 100px; height: 100px; background-color: red; } </style>
</head>
<body>
<input type="radio" class="radio"/>
</body>
</html>

在这里插入图片描述

怎么解决呢?

使用label进行伪元素(或一些标签,比如i,em,span等)和input绑定,隐藏单选框,显示伪元素,且使用css选择器:checked进行点击后伪元素(或绑定标签)内容(或样式)的修改。

以下例子只是修改伪元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改单选框样式</title>
    <style> /*.radio{*/ /*width: 100px;*/ /*height: 100px;*/ /*background-color: red;*/ /*}*/ .radio { 
     display: none; } /* +代表相邻的元素 */ .radio + i { 
     font-style: normal; text-align: center; font-size: 16px; } /* ::after伪元素,使用伪元素,必须含有content属性,可以为'',但不可不写 */ .radio + i::after { 
     content: '☆'; } /* 点击后伪元素内容变化 */ .radio:checked + i::after { 
     content: '★'; } </style>
</head>
<body>
<label>
    <input type="radio" class="radio" name="aa" id="aa"/>
    <i></i>
    aa
</label>
<label>
    <input type="radio" class="radio" name="aa" id="bb"/>
    <i></i>
    bb
</label>
</body>
</html>

完成后的结果
在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141656.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Hmily 源码解析 (三) —— himly事务上下文

    Hmily 源码解析 (三) —— himly事务上下文目录1.HmilyTransactionContexthimly事务上下文,在一个线程内只有唯一实例。在线程内时不时的需要获取事务的id及角色状态等信息。如果作为参数在函数中传递并不合适,并且由于切面,拦截器等等编程方式也无法依靠该方式获取所需要的信息。hmily采用的方式是将所需要的信息封装为一个实体,这个实体就是HmilyTransactionContext。并将HmilyTr…

  • Windows文件名长度限制

    win7x64位环境:260个长度是作为总的文件名长度限制。例如:所在文件夹的长度为50则文件名的长度被限制在210之下,超出的话会被进行截断。如果在程序中的话,超出长度的话MoveFile/CopyFile会返回错误,处理失败。例子:1.我手动在C:\建立一个文件,使用280个长度进行重命名,实际生成的却是文件名是256个

  • pycharm一键调整代码格式_格式化代码

    pycharm一键调整代码格式_格式化代码一常用快捷键编辑类:Ctrl+D复制选定的区域或行Ctrl+Y删除选定的行Ctrl+Alt+L代码格式化Ctrl+Alt+O优化导入(去掉用不到的包导入)Ctrl+鼠标简介/进入代码定义Ctrl+/行注释、取消注释Ctrl+左方括号快速跳到代码开头Ctrl+右方括号快速跳到代码末尾Shift+F10运行Sh

  • MATLAB–相机标定教程

    MATLAB–相机标定教程对相机标定原理不熟悉的同学可以参考张正友标记法的译文MATLAB:2014a待标记图像:http://download.csdn.net/detail/heroacool/9477530应用程序下找到CameraCalibration工具箱加载待标定的图像填写棋盘格每个格子边长的真实值可以预览成功检测出棋盘格的图像,然后开始标定,点击Calibrate平均误差小于0.5即可导出相机

  • linux 复制文件夹内所有文件到另一个文件夹

    linux 复制文件夹内所有文件到另一个文件夹cp-Rf/home/user1/*/root/temp/将/home/user1目录下的所有东西拷到/root/temp/下而不拷贝user1目录本身。即格式为:cp-Rf原路径/目的路径/

  • Mina框架的使用[通俗易懂]

    什么是Mina框架ApacheMina是一个能够帮助用户开发高性能和高伸缩性网络应用程序的框架。它通过Javanio技术基于TCP/IP和UDP/IP协议提供了抽象的、事件驱动的、异步的API。是用来代替NIO网络框架的,对NIO框架进行了一层封装的Socket库。Mina主页下载地址为什么使用Mina?传统socket:阻塞式通信每建立一个Socket连接时,同时创建一个新线程对该Soc

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号