input type=checkbox样式设置

蔚落 2022-03-18 04:56 301阅读 0赞

效果

![20190219143029963.jpg][]

html代码

<div class="checkbox-item">
        <input name="checkbox" id="item1" type="checkbox" />
        <label class="checkbox-label" for="item1">IM消息</label>
    </div>

css样式设置代码

.checkbox-item{
    	margin-right: 20px;
    	display: inline-block;	
    	position: relative;
    }
    .checkbox-item label{
    	line-height: 34px;
    	vertical-align: middle;
    	cursor: pointer;
    }
    .checkbox-item input[type="checkbox"] {
    	margin-right: 5px;
    	width: 20px;
    	height: 20px;
    	visibility: hidden;
    }
    /* 设计新的checkbox，位置 */
    .checkbox-item label:BEFORE {
    	content: '';
    	position: absolute;
    	top: 5px;
    	left: 0px;
    	width: 20px;
    	height: 20px;
    	border-radius: 2px;
    	border: 1px solid #bbb;
    	background: #fff;
    	cursor: pointer;
    }
    /* 点击初始的checkbox，将新的checkbox关联起来 */
    .checkbox-item input[type="checkbox"]:checked +label:BEFORE {
    	content: '\2713';
    	display: block;
    	line-height: 20px;
    	vertical-align: middle;
    	text-align: center;
    	background-color: #1890FF;
        color: #ffffff;
    }

参考：[https://blog.csdn.net/qq\_34182808/article/details/79992465][https_blog.csdn.net_qq_34182808_article_details_79992465]

[20190219143029963.jpg]: /images/20220318/c99251d5e5e9436b930b43d3022ea7a3.png
[https_blog.csdn.net_qq_34182808_article_details_79992465]: https://blog.csdn.net/qq_34182808/article/details/79992465

发表评论取消回复

表情：

评论列表（有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

相关 input file 设置样式去掉选择文件的样式

原有的input file 样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

痛定思痛。/ 2023年08月17日 16:22/ 0 赞/ 134 阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 11 阅读

相关 ElementUI - input 框组件设置透明背景（样式覆盖）

前言有时后，`input` 框可能需要设置为透明背景来与大背景图融合，如下图所示： ![在这里插入图片描述][20210508110035259.png] 解决

秒速五厘米/ 2023年01月19日 04:58/ 0 赞/ 311 阅读

相关修改样式input rido

css input checkbox和radio样式美化在之前的一篇文章中，我已经介绍了input file[上传按钮的美化][Link 1]，地址：[htt

悠悠/ 2022年06月04日 08:27/ 0 赞/ 236 阅读

相关设置input 中placeholder的样式

一、效果 ![在这里插入图片描述][70] 二、代码 <!DOCTYPE html> <html lang="en"> <head>

短命女/ 2022年05月09日 04:58/ 0 赞/ 275 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 357 阅读

相关 input type=checkbox样式设置

效果 ![20190219143029963.jpg][] html代码 <div class="checkbox-item"> <input n

蔚落/ 2022年03月18日 04:56/ 0 赞/ 302 阅读

相关 input中placeholder的css样式设置

<template> <view> <input class="search" type="text" placeholder="请输入搜索内容" placeholder

刺骨的言语ヽ痛彻心扉/ 2022年01月31日 18:19/ 0 赞/ 316 阅读

相关修改el-input样式

HTML代码： <el-input class="textarea" placeholder="请输入用户名" auto-complete="on"></el-inp

港控/mmm°/ 2021年09月30日 02:50/ 0 赞/ 1092 阅读

相关 el-input系列（el-input、el-select等）palceholder 的样式设置

el-input系列所有带有palceholder的，修改palceholder的样式。。。。。为了避免样式污染，对placeholder先包一个父类 //谷

浅浅的花香味﹌/ 2021年07月24日 14:56/ 0 赞/ 817 阅读