自定义样式多选，单选框

最新推荐文章于 2024-01-05 09:40:20 发布
最新推荐文章于 2024-01-05 09:40:20 发布
阅读量173 收藏
点赞数
分类专栏： HTML5 文章标签： 多选框美化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangbo_/article/details/80078476
版权
本文展示了如何使用HTML和JavaScript（jQuery）实现自定义样式的多选和单选框，通过提供的代码示例，可以实现对基础选择元素的视觉增强。
摘要由CSDN通过智能技术生成

效果图：


HTML源码 ：替换<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script> 路径可以运行

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>选择框样式</title>
<style>
.ntc_checkbox input[type="checkbox"],input[type="radio"] {
display: none;
}
.ntc_checkbox .ntc_radio_item{
  font-family: heiti-sc, 微软雅黑, Arial, Helvetica, Georgia, 'Bitstream Charter', serif; 
  height: 22px; 
  line-height: 22px;
  font-size: 12px;
  cursor: pointer;
  margin:0px auto;
  
  /**内容居中**/
  text-align:center;
  vertical-align:middle;
  
  /**内容宽度自适应**/
  display:inline-block; 
  *display:inline; 
  *zoom:1;  
  
}

.ntc_radio_item span:hover {
background-color: #ff9e50;
    color: #fff;
}

.ntc_radio_item span:active{
    position:relative;
top:1px;
}

.ntc_radio_item span{
  text-align: center;
  vertical-align:middle;
  display:block;
  height: 22px;
  line-height: 22px;  
  
  -webkit-border-radius: 3px;
  border-radius: 2px;
  padding: 2px 6px;
  margin-right:2px;
  color: #9e9e9e;
}






.ntc_checkbox .ntc_checkbox_item {
  font-family: heiti-sc, 微软雅黑, Arial, Helvetica, Georgia, 'Bitstream Charter', serif; 
  height: 22px; 
  line-height: 22px;
  font-size: 12px;
  cursor: pointer;
  margin:0px auto;
  
  /**内容居中**/
  text-align:center;
  vertical-align:middle;
  
  /**内容宽度自适应**/
  display:inline-block; 
  *display:inline; 
  *zoom:1;
  
  
}






.ntc_checkbox_item span:hover {
background-color: #ff9e50;
    color: #fff;


}


.ntc_checkbox_item span:active{
    position:relative;
最低0.47元/天 解锁文章
AllFB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 自定义多选框样式
wsc2111的博客
06-08 3264
今天看了一个做 Todo List 的视频，学了一招，可以自定义多选框的样式，只用 CSS 就可以做到。 起步 先写一些关于表单最基础的 HTML 和 CSS。 下面的 HTML 表单允许你选择多个颜色： <form> <fieldset> <legend>Choose Your Color</legend> <ul> <li> <input type="checkbox" nam
vue v-model实现自定义样式多选与单选功能
12-09
在这个场景中，我们讨论的是如何使用`v-model`来实现自定义样式的多选与单选功能，特别是在微信小程序的mpvue环境中。 在传统的HTML表单中，我们可以使用`<input type="radio">`或`<input type="checkbox">`来创建...
微信小程序：自定义多选框样式，实现多选、全选功能，以及使用css实现选中打钩效果
llssdshiyi的博客
08-15 5376
自定义微信小程序多选框样式，实现多选、全选功能，以及使用css实现选中打钩效果
vue自定义多选样式
FarmanKKK的博客
09-22 4894
自定义多选框样式 平时一直用的框架中的样式，这次不行了 要自己写。 做个笔记记录一下 很久没写这中样式了 设计要求的样式 其实那个勾并不是checkbox，而是一个i标签，给他的两边设置border（白边），然后旋转一下实现的，因为这一整个label里的点击都会触发checked，所以并不用管checkbox的样式，你另外写一个显示出来就好了。 template中 &amp;amp;lt;div cla...
单选多选样式写法
weixin_30736301的博客
12-14 108
动画多选样式 // html <div id="box"> <input type="checkbox" id="check" name="check" /> <label for="check">Checkbox</label> </div> // css input[type=checkbox]+label:befo...
单选、多选样式美化
似水流年
04-12 1202
今天空了，特意把常见的单选、多选美化下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框样式</title> <style> *{ margin: 0; padding: 0; } body{ ...
原生JS实现自定义下拉单选选择框功能
10-17
在本文中，我们将探讨如何使用...总的来说，通过自定义下拉单选选择框，我们可以获得更灵活的样式控制和交互体验，满足各种项目需求。这个例子提供了一个基础的实现框架，开发者可以根据自己的项目需求进行扩展和定制。
iOS 自定义单选多选控件
01-28
在iOS开发中，为了提供用户友好的交互体验，开发者经常需要自定义单选或多选控件。本篇文章将深入探讨如何在iOS应用中创建这样的自定义控件，并着重讲解其核心功能，包括单选、多选、文字自适应以及选项是否顶边的...
Bootstrap3 多选和单选框(checkbox)
08-31
在Bootstrap3中，多选框（checkbox）和单选框（radio）是两个常用的表单元素，用于用户交互，特别是进行数据选择。 **多选框（Checkbox）** 多选框允许用户在一组选项中选择一个或多个选项。在Bootstrap3中，创建一...
html分组多选单选下拉框.rar
12-31
在HTML中，分组多选和单选下拉框是常见的表单元素，它们用于收集用户数据并提供多个选项供用户选择。这些功能通常通过`<select>`标签实现，配合`<optgroup>`进行分组，以及`<option>`定义可选的项目。下面将详细介绍...
自定义原生多选/单选框样式
最新发布
文龙刚的博客
01-05 670
【代码】自定义原生多选/单选框样式。
html怎么写单选和多选题,关于Html5中的单选与多选
weixin_34741145的博客
06-07 979
1、下拉列表样式：VolvoSaabOpelAudi属性列表autofocus规定在页面加载后文本区域自动获得焦点。disabled规定禁用该下拉列表。form_id规定文本区域所属的一个或多个表单。multiple规定可选择多个选项。name规定下拉列表的名称。required规定文本区域是必填的。number规定下拉列表中可见选项的数目。1.1 单选按钮 Male Female一般用加以限定。...
多选和单选框
ckyue1219的博客
04-22 390
单选框实现选中不同选项页面变化： radio 1.html <table class="m-table m-table-rds" style="width: 100%;margin-top:10px;" align="center"> <tbody> <tr> <th style="width:25%;text-align:right;"><span style="color:red;margin:3px;">*<
HTML + CSS 连载 | 35 - 单选、多选框和 textarea
JingnanJia的博客
10-31 2045
input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以看到 value 属性的值就是我们向服务器发送的数据。
HTML多选操作的实现
weixin_33985679的博客
11-07 3268
最近写了一个工作室随机出人为某部门干活的小Demo 处理的过程中也学到了一个新技能:多选操作,主要是前端的实现 这里就简单记录一下 不过学长说我的代码耦合性太强,不宜于维护.......再加油吧 首先是思路,构造思路往往比写代码更占据时间 我首先想到的是那种点击之后可以切换css属性的前端样式 然后就是切换的时候记录对应的所选ID,堆到数组并post给后端 动态css属性 全部都是JQ在带节...
html
weixin_42545898的博客
03-15 236
&lt;h1&gt;&lt;/h1&gt;是标题标签 &lt;html&gt;&lt;/html&gt;称为根标签在 下面这些标签可用在 head 部分： &lt;head&gt; &lt;title&gt;...&lt;/title&gt; //标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。 &lt;...
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
wfeil211的博客
02-27 4410
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
Vue中用element-ui封装的el-tree和el-select实现下拉树状多选单选，灵活自定义模糊查询、单选多选，默认选中值。
imapig_的博客
04-28 4887
这里写目录标题一.实现效果1.多选样式2.单选样式二.组件代码三.引入方法 一.实现效果 1.多选样式 2.单选样式 二.组件代码 文件路径：pages/publicComp/selectTree <template> <div> <el-popover popper-class="selectTree" v-clickoutside="replyOutside" placement="bottom-start"
Android：checkbox多选样式怎么操作
谢桥的博客
02-21 935
这个问题折磨了好几天，一直拖着没搞，最后收尾了，逃不掉了，没办法 下面是实现的效果，方便大家了解一下这个是啥东西 就是点击全部的checkbox的时候下面的都会选中，下面的三个item是动态创建的，当动态创建的item点满的时候，”全部“，会触发勾选，有个细微的联动效果，可能有同学一时间摸不着头脑，比如，俺，当时感觉难搞，硬是不想搞... 我只提供一些核心的代码，具体部分，各位同学自己写吧，全粘贴上来实在太多了 然后就说一下这个咋实现的 其实不难，对吧，但我写的好像比较复杂，我打.
创建一个 android 项目，要求如下：要求使用文本框输入答案，单击按钮判断对错，并提示对错或要求使用单选框选择单项选择答案；使用复 选框选择多选答案），并将结果存储在 xml 文件中，文件名“姓名的拼音简称.xml”。使用合适的布局，要求使用背景图片（或自定义的 drawable 对象 xml 文件、或自定义颜色）。使用合适的控件，控件属性要求：设置合理的字体大小、颜色、背景、对齐方式、padding、margin 等属性， 使界面美观，若通过自定义样式可获得加分,所有控件 id 包含考生个人姓名简称。
06-02
2. 使用单选框选择单项选择答案。 3. 使用复选框选择多选答案。 4. 将结果存储在 xml 文件中，文件名为“姓名的拼音简称.xml”。 5. 使用合适的布局，要求使用背景图片（或自定义的 drawable 对象 xml 文件、或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值