：after伪类的用法，checkbox，radio，content

最新推荐文章于 2022-07-22 10:59:54 发布
最新推荐文章于 2022-07-22 10:59:54 发布
阅读量970 收藏 1
点赞数
分类专栏： 【HTML5+CSS3点滴知识 】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_17775997/article/details/56278222
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.cross{
				margin: 100px;
			    width: 40px;
			    height: 40px;
			    background-color: #F3F9FF;
			    border-radius: 20px;
			    border: 1px solid #DBE6EF;
			    display: inline-block;
			    position: relative;
			    position: relative;
			}
			.cross:after{
			    content: "\2715";//特殊字符或形状
			    color: #a2b6c5;
			    font-size: 40px;
			 	position: absolute;
			    cursor: pointer;
			    top: -9px;
    			left: 4px;
			}
			.cross:hover::after{
				content: "\2764";//特殊字符或形状
			    color: #a2b6c5;
			    font-size: 40px;
			 	position: absolute;
			    cursor: pointer;
			    top: -7px;
    			left: 1px;
			}
			input[type=checkbox],input[type=radio]{
				display: inline-block;
				width: 28px;
			    height: 28px;
			   	border: 0;
			    outline: 0!important;
			    background-color: transparent;
			    -webkit-appearance: none;
			    position: relative;
			}
			input[type=checkbox]:before,input[type=radio]:before {
			    content: "";
			    background: url(imgs/icon02.png);
			    display: inline-block;
    			/*background: palegreen;
    			border-radius: 50%;*/
    			position: absolute;
    			width: 48px;
			    height: 48px;
			}
			input[type=checkbox]:checked:before,input[type=radio]:checked:before {
		        content: "";
			    background: url(imgs/icon01.png);
			    display: inline-block;
			    /* background: palegreen; */
			    /* border-radius: 50%; */
			    position: absolute;
			    width: 48px;
			    height: 48px;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="margin: 200px;">
			<div id="" class="cross"></div>
			<input type="checkbox" name="checkbox01" id="" value="" />
			<input type="checkbox" name="checkbox01" id="" value="" />
			
			<br/>
			<input type="radio" name="dongtao" id="" value="" />
			<input type="radio" name="dongtao" id="" value="" />
		</div>
		
	</body>
</html>





















barnett_y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
选择radio/checkbox，显示或隐藏content内容
weixin_45209491的博客
07-26 203
转载1： https://www.cnblogs.com/bayu/articles/12188944.html 转载2： https://blog.csdn.net/qq_34377273/article/details/109157116
checkbox CSS
always007的博客
09-22 356
.checkbox {   display: none; } .checkbox + .checkbox-icon {   position: relative;   vertical-align: middle; } .checkbox + .checkbox-icon:before {   content: "\f372";   font-family: "Ionicons"
CSS ::before和::after用来做复选框
q_928739110的博客
12-17 7999
::before和::after是干嘛的呢 ::before选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容。 它们都必须使用content 属性来指定要插入的内容（content : "内容，可以为空值";）。如果没有content属性来指定内容的话将无效， 来看例子：      看见没，：：before直接变没了，同理，after就不演
点击文本选中复选框
旧有-
12-04 550
当使用CheckBox复选框标签的时候，因为复选框后面会跟随着所选的内容。所以初学者往往会直接在复选框标签后面直接添加文本内容。 这样的写法是无法让读者通过点击文字来选定复选框按钮的,内容过多的时候甚至无法判断这是所选内容还是文本自读。 让两者区分开来我们只需在CheckBox标签里面添加Content属性,在里面确定复选框所选内容。 图下是两个写法的样式图,在样式上没有太大的差距,例一可以通过点击文字来选中复选框。 而例二复选框和文字不能当成一个整体。 ...
如何自定义checkbox的样式
草巾冒小子的博客
07-17 2672
如何自定义 input 复选框的样式作为一个前端开发者，很多时候都会遇到不同的开发需求，比如： 自定义下拉选项卡的样式 自定义radio单选框的样式 自定义checkbox复选框样式 自定义input输入框样式 自定义ul,li列表的样式 自定义多背景 自定义table下td多行文字的垂直居中问题 等等： 这些问题，有的需要通过代码设置，来取消浏览器或者设备自带的或者默认的样式。但往往，有的可以修改
使用纯CSS美化radio和checkbox
04-28
3. **使用`:checked`伪类**：当radio或checkbox被选中时，我们可以改变对应的伪元素样式。例如，为radio添加一个圆点，为checkbox画一个勾。 ```css input[type="radio"]:checked + label::before { background-...
HTML的checkbox和radio样式美化的简单实例
09-28
3. `input[type="checkbox"]:checked + label:after`: 当复选框被选中时，这个伪元素`::after`将被添加到`label`元素之后。`content`属性设置了勾号字符（'\2714'），并调整了字体大小、颜色和背景颜色。`position: ...
利用纯CSS自定义Checkbox和Radio的样式示例代码
09-27
为了隐藏实际的Checkbox和Radio，我们可以设置`display: none`，然后通过`:checked`伪类在选中状态时改变`::before`的内容和样式： ```css input[type=radio],input[type=checkbox] { display: none; } input...
jQuery美化radio和checkbox
11-08
例如，你可以隐藏原生的input元素，然后创建自定义的UI元素，如使用`<label>`配合`:before`和`:after`伪元素，通过CSS控制其背景、边框和图标。当radio或checkbox被选中时，通过jQuery监听事件并更新自定义UI的状态...
纯CSS美化input radio checkbox样式.zip
11-05
例如，使用`:checked`伪类来改变选中状态的样式，利用`::before`和`::after`伪元素创建自定义的图标。 ```css /* 隐藏原生input元素 */ input[type="radio"], input[type="checkbox"] { display: none; } /* 创建...
伪类复选框改变样式
一只前端小菜鸟
03-22 584
大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？ 这里给大家介绍特别简单的一种方式。 话不多说，上代码。 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <style typ...
WPF 控件专题 CheckBox 控件详解
最新发布
^@^lemon tea^@^
07-22 1万+
WPF 控件专题 CheckBox 控件详解
CheckBox的一些用法（内容包含动态加载布局）
u012937267的博客
08-10 1107
android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical" >            android:layout_width="wrap_content"        android:layout_height="wrap_c
伪类选择器:checked将作用与input类型为radio或者checkbox以及option
徐同保的专栏
02-23 1700
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, m
使用伪类选择器修改radio的默认背景色
qq_39206750的博客
10-15 853
//使用伪类覆盖单选框的样式 .information_bootom { opacity: 0.8; .readio_top { margin-bottom: 1.85vh; margin-top: 1.85vh; font-size: 16px; font-family: Mi...
CSS按钮开关，利用伪类元素选择器：after和transition过渡效果实现
barkL的博客
07-13 611
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0;margin: 0; } input[type='checkbox']{ margin: 100px; -webkit-appearance: none;.
CSS 中 ::before 和 ::after 伪元素的几个实际用途
南城
05-29 8213
基于 CSS 中 ::before 和 ::after 伪元素的几个实际场景的运用，文末还有苹果充电线的实现。
CSS 实现对号效果
热门推荐
u011848617的专栏
09-23 1万+
实现对号效果，一种思路是利用现成的符号，直接在网上搜索到√，插入页面。另一种思路是本文要介绍的用 CSS 实现，思路是： 给块级元素设置宽度和高度 设置元素相邻的两个 border 旋转元素 HTML <divclass="check-style-unequal-width"></div> 解析： 此处需要使用块级元素 ...
Java AWT教程：复选框与Checkbox类详解
Checkbox类的主要作用是创建一个可切换的开关，用户可以通过点击改变其状态，通常配合一个标签使用，清晰地标识出选项的内容。它不仅独立存在，也可以作为CheckboxGroup的一部分，实现多个复选框的选择互斥或关联，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值