实现单选框的css,7款纯CSS实现不错的自定义单选框

最新推荐文章于 2024-01-05 00:15:00 发布
最新推荐文章于 2024-01-05 00:15:00 发布
阅读量1.2k 收藏
点赞数
文章标签： 实现单选框的css

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700);

*,

*::after,

*::before {

box-sizing: border-box;

}

html,

body {

height: 100%;

min-height: 100%;

}

body {

margin: 0;

background: #3D5A59;

font-family: 'Raleway', Arial, sans-serif;

}

.section {

text-align: center;

height: 100%;

margin: 0 auto;

padding: 6em 0;

}

.section__title {

font-size: 1.1em;

text-transform: uppercase;

letter-spacing: 4px;

color: #fff;

margin-bottom: 3em;

}

.section--valo {

background: #2994B2;

}

.section--tuli {

background: #095062;

}

.section--maa {

background: #2D4659;

}

.section--taivas {

background: #009589;

}

.section--niitty {

background: #6DC995;

}

.section--nummi {

background: #0E5F76;

}

.section--meri {

background: #04879C;

}

.toggle-button {

position: relative;

display: inline-block;

color: #fff;

margin: 0 20px;

}

.toggle-button label {

display: inline-block;

text-transform: uppercase;

cursor: pointer;

text-align: left;

}

.toggle-button input {

display: none;

}

.toggle-button__icon {

cursor: pointer;

pointer-events: none;

}

.toggle-button__icon:before,

.toggle-button__icon:after {

content: "";

position: absolute;

transition: 0.2s ease-out;

}

@media only screen and (max-width: 480px) {

.toggle-button--valo {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

}

.toggle-button--valo label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--valo label:before,

.toggle-button--valo label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--valo label:before {

content: attr(data-text);

}

.toggle-button--valo input:checked ~ .toggle-button__icon:after {

transform: translate(0, 0);

animation: show .2s;

}

.toggle-button--valo .toggle-button__icon {

z-index: 1;

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

overflow: hidden;

border-radius: 50%;

}

.toggle-button--valo .toggle-button__icon:before,

.toggle-button--valo .toggle-button__icon:after {

border-radius: 50%;

}

.toggle-button--valo .toggle-button__icon:before {

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #fff;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

}

.toggle-button--valo .toggle-button__icon:after {

top: 4px;

left: 4px;

width: 60%;

height: 60%;

background: #61B136;

animation: hide .2s ease-out;

transform: translate(0, 200%);

transition: none;

}

.toggle-button--valo:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

.toggle-button--valo:hover input:not(:checked) ~ label:before {

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

@keyframes hide {

0% {

transform: translate(0, 0);

}

100% {

transform: translate(0, -200%);

}

}

@keyframes show {

0% {

transform: translate(0, 200%);

}

100% {

transform: translate(0, 0);

}

}

@keyframes hover {

0% {

transform: scale(1);

}

30% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

.toggle-button--tuli {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

.toggle-button--tuli label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--tuli label:before,

.toggle-button--tuli label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--tuli label:before {

content: attr(data-text);

}

.toggle-button--tuli input:checked ~ .toggle-button__icon:after {

transform: translate(0, 0);

animation: slideLeft .2s;

}

.toggle-button--tuli .toggle-button__icon {

z-index: 1;

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

overflow: hidden;

border-radius: 50%;

}

.toggle-button--tuli .toggle-button__icon:before,

.toggle-button--tuli .toggle-button__icon:after {

border-radius: 50%;

}

.toggle-button--tuli .toggle-button__icon:before {

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #fff;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

}

.toggle-button--tuli .toggle-button__icon:after {

top: 4px;

left: 4px;

width: 60%;

height: 60%;

background: #61B136;

animation: slideRight .2s ease-out;

transform: translate(0, 200%);

transition: none;

}

.toggle-button--tuli:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

.toggle-button--tuli:hover input:not(:checked) ~ label:before {

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

@keyframes slideRight {

0% {

transform: translate(0, 0);

}

100% {

transform: translate(-200%, 0);

}

}

@keyframes slideLeft {

0% {

transform: translate(200%, 0);

}

100% {

transform: translate(0, 0);

}

}

@keyframes hover {

0% {

transform: scale(1);

}

30% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

@media only screen and (max-width: 480px) {

.toggle-button--maa {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

}

.toggle-button--maa label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--maa label:before,

.toggle-button--maa label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--maa label:before {

content: attr(data-text);

}

.toggle-button--maa input:checked ~ .toggle-button__icon:before {

animation: wave .7s ease-out;

}

.toggle-button--maa input:checked ~ .toggle-button__icon:after {

transform: scale(1);

animation: zoomIn .2s;

}

.toggle-button--maa .toggle-button__icon {

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

border-radius: 50%;

background: #fff;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

}

.toggle-button--maa .toggle-button__icon:before,

.toggle-button--maa .toggle-button__icon:after {

border-radius: 50%;

}

.toggle-button--maa .toggle-button__icon:before {

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.8);

}

.toggle-button--maa .toggle-button__icon:after {

top: 4px;

left: 4px;

width: 60%;

height: 60%;

background: #61B136;

animation: zoomOut .2s ease-out;

transform: scale(0);

transition: none;

}

.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

.toggle-button--maa:hover input:not(:checked) ~ label:before {

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

@keyframes zoomOut {

0% {

transform: scale(1);

}

30% {

transform: scale(1.2);

}

100% {

transform: scale(0);

}

}

@keyframes zoomIn {

0% {

transform: scale(0);

}

90% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

@keyframes hover {

0% {

transform: scale(1);

}

30% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

@keyframes wave {

0% {

opacity: 1;

transform: scale(1);

}

40% {

opacity: 0.2;

}

100% {

opacity: 0;

transform: scale(1.5);

}

}

@media only screen and (max-width: 480px) {

.toggle-button--taivas {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

}

.toggle-button--taivas label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--taivas label:before,

.toggle-button--taivas label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--taivas label:before {

content: attr(data-text);

}

.toggle-button--taivas input:checked ~ .toggle-button__icon:before {

animation: wave .7s ease-out;

}

.toggle-button--taivas input:checked ~ .toggle-button__icon:after {

opacity: 1;

animation: zoomFadeIn .4s;

}

.toggle-button--taivas .toggle-button__icon {

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

border-radius: 50%;

background: #fff;

overflow: visible;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

}

.toggle-button--taivas .toggle-button__icon:before,

.toggle-button--taivas .toggle-button__icon:after {

border-radius: 50%;

}

.toggle-button--taivas .toggle-button__icon:before {

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.8);

}

.toggle-button--taivas .toggle-button__icon:after {

top: 4px;

left: 4px;

width: 60%;

height: 60%;

background: #61B136;

animation: zoomFadeOut .2s ease-out;

opacity: 0;

transition: none;

}

.toggle-button--taivas:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

.toggle-button--taivas:hover input:not(:checked) ~ label:before {

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

@keyframes zoomFadeOut {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@keyframes zoomFadeIn {

0% {

opacity: 0;

transform: scale(3);

}

90% {

opacity: 1;

transform: scale(1);

}

100% {

transform: scale(1);

}

}

@keyframes hover {

0% {

transform: scale(1);

}

30% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

@keyframes wave {

0% {

opacity: 1;

transform: scale(1);

}

40% {

opacity: 0.2;

}

100% {

opacity: 0;

transform: scale(1.5);

}

}

/*

* Toggle button variables

*/

/*

* Toggle button styles

*/

.toggle-button--niitty label {

line-height: 20px;

}

.toggle-button--niitty input[type=radio]:checked ~ .toggle-button__icon {

background: #fff;

}

.toggle-button--niitty input[type=radio]:checked ~ .toggle-button__icon:before,

.toggle-button--niitty input[type=radio]:checked ~ .toggle-button__icon:after {

opacity: 1;

}

.toggle-button--niitty .toggle-button__icon {

display: inline-block;

float: left;

position: relative;

width: 20px;

height: 20px;

transition: all 0.2s;

margin-right: 10px;

border: 2px solid #fff;

border-radius: 50%;

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

}

.toggle-button--niitty .toggle-button__icon:before,

.toggle-button--niitty .toggle-button__icon:after {

top: 5px;

left: 2px;

width: 12px;

height: 2px;

border-radius: 3px;

background: #fff;

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

top: 35%;

background: #61B136;

opacity: 0;

transform-origin: left center;

}

.toggle-button--niitty .toggle-button__icon:before {

transform: translate(0, 0) rotate(45deg) scale(0.6, 1);

}

.toggle-button--niitty .toggle-button__icon:after {

transform: translate(4px, 6px) rotate(-45deg);

}

.toggle-button--niitty:hover input[type=radio]:not(:checked) ~ .toggle-button__icon {

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}

@media only screen and (max-width: 480px) {

.toggle-button--nummi {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

}

.toggle-button--nummi label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--nummi label:before,

.toggle-button--nummi label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--nummi label:before {

content: attr(data-text);

}

.toggle-button--nummi input:checked ~ .toggle-button__icon {

animation: wiggle .2s ease-out;

}

.toggle-button--nummi input:checked ~ .toggle-button__icon:after {

animation: flyInRight .4s;

transform: translate(0);

}

.toggle-button--nummi .toggle-button__icon {

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

border-radius: 50%;

background: #fff;

overflow: hidden;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

}

.toggle-button--nummi .toggle-button__icon:before,

.toggle-button--nummi .toggle-button__icon:after {

border-radius: 50%;

}

.toggle-button--nummi .toggle-button__icon:before {

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.8);

}

.toggle-button--nummi .toggle-button__icon:after {

top: 4px;

left: 4px;

width: 60%;

height: 60%;

background: #61B136;

transition: none;

transform: translate(200%);

animation: flyOutLeft .4s;

}

.toggle-button--nummi:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

.toggle-button--nummi:hover input:not(:checked) ~ label:before {

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

@keyframes flyInRight {

0% {

transform: translate(200%);

}

50% {

transform: translate(200%);

}

70% {

transform: translate(-50%);

}

100% {

transform: translate(0);

}

}

@keyframes flyOutLeft {

0% {

transform: translate(0);

}

70% {

transform: translate(0);

}

100% {

transform: translate(-200%);

}

}

@keyframes wiggle {

0% {

transform: translate(0);

}

80% {

transform: translate(5px);

}

100% {

transform: translate(0);

}

}

@keyframes hover {

0% {

transform: scale(1);

}

30% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

}

@media only screen and (max-width: 480px) {

.toggle-button--meri {

display: block;

width: 110px;

margin: 0 auto 10px auto;

}

}

.toggle-button--meri label {

width: 110px;

height: 20px;

line-height: 20px;

transition: all 0.2s;

}

.toggle-button--meri label:before,

.toggle-button--meri label:after {

position: absolute;

top: 0;

left: 30px;

width: 110px;

transition: all 0.2s .1s ease-out;

}

.toggle-button--meri label:before {

content: attr(data-text);

}

.toggle-button--meri input:checked ~ .toggle-button__icon:before {

transition-delay: 0;

transform: rotateY(0deg);

}

.toggle-button--meri input:checked ~ .toggle-button__icon:after {

transition-delay: .2s;

transform: rotateY(0deg);

}

.toggle-button--meri .toggle-button__icon {

position: absolute;

left: 0;

top: 0;

height: 20px;

width: 20px;

border-radius: 50%;

background: #fff;

overflow: hidden;

box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);

perspective: 800;

transform-style: preserve-3d;

}

.toggle-button--meri .toggle-button__icon:before,

.toggle-button--meri .toggle-button__icon:after {

top: 4px;

width: 6px;

height: 12px;

background: #61B136;

}

.toggle-button--meri .toggle-button__icon:before {

left: 4px;

border-radius: 12px 0 0 12px;

transform: rotateY(90deg);

transform-origin: right center;

}

.toggle-button--meri .toggle-button__icon:after {

right: 4px;

border-radius: 0 12px 12px 0;

transform: rotateY(90deg);

transform-origin: left center;

transition-delay: .2s;

}

.toggle-button--meri:hover input:not(:checked) ~ .toggle-button__icon {

animation: hover .2s;

}

weixin_39979332
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css自定义单选框和开关选择器
九亿宅男的梦的博客
06-20 482
自定义单选框复选框开关按钮样式
HTML + CSS 连载 | 35 - 单选、多选框和 textarea
JingnanJia的博客
10-31 1703
input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以看到 value 属性的值就是我们向服务器发送的数据。
html,css制作单选框
weixin_47580522的博客
01-08 599
html,css
Element-ui radio单选框CSS样式修改(精细版)
HikingO的博客
11-16 1767
Element-ui 单选框样式修改
css 使用:checked实现自定义单选框、复选框、开关、标签复选、素材单选等实用实战案例
朝阳39的博客
12-20 1121
自定义单选框 效果见 https://demo.cssworld.cn/selector/9/2-3.php <p> <input type="radio" id="radio1" name="radio" checked> <label for="radio1" class="cs-radio"></label> <label for="radio1">单选项1</label> <input.
（切图笔记）通用的纯css3实现 单选框radio复选框checkbox的美化 附代码 亲测好用
qietuwang的博客
12-28 1057
切图笔记记录切图网日常，说到网页的表单美化 通常需要用到插件，因为 select，radio，checkbox比较特殊，无法通过css直接美化 ，这些也有比较不错的美化插件 可以实现，不过这都是早几年的情况，现在浏览器日益更新升级，对于html5 css3标准支持的更好，使得我们现在可以通过css3也可以进行美化，没有插件参与，就可以省事不少，同时也可以让页面代码更加简洁，用到了图片背景，不过是基于data：image 方式直接引用的，所以不用到实体图片。复制以下代码即可实现 单选 复选美化，亲测好用。
纯CSS实现自定义单选框和复选框功能
12-28
1 实现效果 2 知识点讲解 2.1 标签 在html中，标签通常和<input>标签一起使用，标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，标签的作用是为鼠标用户改进了可用性，当用户点击...
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
01-30
纯css实现适配谷歌、火狐的自定义多选框、单选框颜色
一款纯css3实现简单的checkbox复选框和radio单选框
09-25
主要为大家介绍了利用纯css3实现一款简单实用的checkbox复选框和radio单选框，代码简单易懂，可以直接复制，感兴趣的可以进来看看哦
HTML+CSS实现单选框、复选框美观的样式
09-24
主要介绍了HTML+CSS实现单选框、复选框美观的样式,需要的朋友可以参考下
纯CSS3开关样式的自定义单选框按钮
12-23
纯CSS3开关样式的自定义单选框按钮，还在找好看的单选框？不用再招了，纯CSS3实现的，心动还不行动？？？非常的美观，建议下载！
利用CSS3实现单选框动画特效示例代码
12-13
可以很清楚的看到这个特效就是当我们点击的时候，黑点会以一种缩放的动画显示出来，下面来看看具体如何实现。 复制代码代码如下:”radio-1″> <input type=”radio” name=”radio-1″ id=”radio-1-1″ checked=...
纯css3实现效果超级炫的checkbox复选框和radio单选框
01-19
今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧! 源码下载这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下: ...
CSS3实例分享–超炫checkbox复选框和radio单选框
12-13
今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧! 这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下:...
用jquery与css打造个性化的单选框和复选框
01-19
上图是经过css和jquery美化后的效果，怎么样呢？是不是很爽啊！这个是我从另一个脚本库看到的一个效果，觉得挺不错的，然后就用jquery自己实现了一个。供大家鉴赏！...打造个性化的单选框和复选框</t
html+css 对input的使用以及详解
最新发布
小十七的个人分享博客
01-05 1585
结合使用（alt 属性表示图片未正常显示时，用于替换图片的提示；如果不写这个属性，当图片未正常显示时，会默认显示。默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。属性，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器。属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，属性的值会发送给服务器（既是初始值，也是提交给服务器的值）属性的值表示的是按钮上显示的文本。属性的值表示的是提交给服务器的值。
全网最简单，没有之一，自定义单选框（Vue）
CsDn_ZhiHui的博客
04-03 1323
基于Vue自定义的一个单选框，可以随便更改大小、颜色。公司ui图上有一个这样的需求，但是原生的input标签上的radio属性在不同浏览器上显示颜色不同，所以索性就自己写了一个，不喜勿喷。
button模拟实现单选框效果
changchang_的博客
09-13 1503
一、功能实现 采用一组button组件，实现类似单选框radio的效果，即在同一组button组件中，只能选中一项（单选）。 方法一： 写死（按钮不多，容易操作） <van-button v-on:click="getVioMoney('50')" >50元</van-button> <van-button v-on:click="getVioMoney('100')" >100元</van-button> <van-button v-on:..
使用css实现单选框/复选框特效
孙婷婷的博客
03-09 1643
效果图附上： 1. 首先写四个单选框： 单选框，类型为radio，同一组的单选框，必须name值一致，id用于与label的for属性关联，value必写，会被发送到服务器。 <form class="radioStyle"> 你最喜欢哪个季节？(radio单选) <input type="radio" name="seas...
html+css实现单选框不是一行排列
05-31
可以通过CSS来实现单选框不在一行排列。具体的方法是使用display: block;将单选框转换为块级元素，然后使用float或者inline-block来控制单选框的位置。例如： ```html <label> <input type="radio" name="gender" value="male"> Male </label> <label> <input type="radio" name="gender" value="female"> Female </label> ``` ```css label { display: block; float: left; /* 或者使用 inline-block */ margin-right: 20px; /* 控制单选框之间的间距 */ } ``` 这样就可以将单选框垂直排列，并且控制单选框之间的间距。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值