简单的纯css重置input单选多选按钮的样式--利用伪类

由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮

html

<input type="radio" />
<input type="checkbox" />

css

input{visibility: hidden;} // 让原生按钮不显示
input::before{
content: "";visibility: visible;display:inline-block;
width: 0.36rem;height: 0.36rem; // 设置合适的宽高
background: url(../assets/icon/nocheck_icon.png) no-repeat center; // 用自己的图片替换-这个是未选中的图片
background-size:contain; }
input:checked::before{
content: "";visibility: visible;display:inline-block;
width: 0.36rem;height: 0.36rem;
background: url(../assets/icon/checked_icon.png) no-repeat center; // 用自己的图片替换-这个是选中的图片
background-size:contain;
}

原文地址:https://www.cnblogs.com/leiting/p/9780102.html

时间: 2024-10-19 14:06:33

简单的纯css重置input单选多选按钮的样式--利用伪类的相关文章

jqurey 遍历 div内的所有input单选复选按钮并判断是否选中

关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li class="vop"> @if (!string.IsNullOrEmpty(item.VoteText)) { <a href="[email protected]&[email protected]"> <img src="@

单选-复选按钮自定义样式

通过":checked"配合其他标签来自定义复选框样式 Html代码: <form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="username" /> <span&

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

初识安卓小程序(开关灯——单选多选按钮控制)

如图: 点击单选按钮"开灯",多选按钮就会显示"关灯"且方块里有对勾:反之,点多选按钮,单选按钮也自动改变. 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"bulb",把两张图片:开灯与关灯状态的图片放入"drawable-"随意一个文件夹下 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLay

用纯css改变默认的radio和checkbox的样式

利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: input[type="radio"],input[type="checkbox"] { display: none } input[type="radio"]+label::before,input[type="checkbox"]+lab

加监听器,单选复选按钮

MainActivity package com.example.lenovo.myapplication; import android.provider.MediaStore; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.CheckBox; import android.widget.CompoundButton; import android

超简单的纯CSS图片无缝循环方法

首先效果如下. 效果就是若干长图通过视口,并且第一张和最后一张要无缝衔接. 接着原理图如下.真的,超简单... 注意:第一张和最后一张必须要是同一张图,这样才能无缝衔接. 如果视口大于每张图片,那就有必要第1,2甚至3张和倒数第3,2,1张相同,这样才能在视口大于图片的情况下完成完成衔接. 从右往左滚动,或者垂直方向滚动效果稍加变动代码即可实现. 代码如下 <!DOCTYPE html> <html> <head lang="en"> <met

前端每日实战4. 纯 CSS 创作一个金属光泽 3D 按钮特效

原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class="box">BUTTON</div> css代码: /* 内容居中*/ html, body { /* 使body继承HTML的高度 ,否则box是不能垂直居中*/ height: 100%; margin: 0; padding: 0; display: flex; justify-content: center; align

72.纯 CSS 创作气泡填色的按钮特效

原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> <li> home <span></span><span></span><span></span><span></span> </li> </ul> </nav> CS