精华内容
下载资源
问答
  • 2018-09-20 18:35:12

    效果图:

           

    CSS:

    input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
    
        input[type='checkbox'] + label {
            display: block;
            height: 30px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.428571429;
            /*color: #009aff;*/
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 2px;
        }
    
         input[type='checkbox']:checked + label {
            /*border: 1px solid #009aff;*/
             background-color: #4dc63c;
             color: #fff;
             border-radius: 2px;
             font-weight: 500;
        }

    jsp:

     <c:forEach items="${serve}" var="s">
           <input id="d${s.id}" type="checkbox" data-type="welfare" name="reason">
           <label for="d${s.id}">${s.name}</label>
       </c:forEach>

    说明:

    ${serve}是后台返回的对象集合

    更多相关内容
  • 看到网上有很多漂亮的按钮,其中大多掺杂js来实现,今天我们来做一个纯CSS+HTML实现的单选按钮,让菜鸟小白也能轻松做出来!首先附上最后的效果图:(忽略我追星的肤浅!) 一、 首先,我们写基本代码:我们写4个div...

    看到网上有很多漂亮的按钮,其中大多掺杂js来实现,今天我们来做一个纯CSS+HTML实现的单选按钮,让菜鸟小白也能轻松做出来!

    首先附上最后的效果图:(忽略我追星的肤浅!)

    5eb1e396a57e02688b89a7cdb057a30b.png

    一、 首先,我们写基本代码:

    我们写4个div分别在里面放置4个单选按钮,第一个选项默认为选中状态,checked

    HTML代码:

    我最喜欢的明星

    李易峰

    邓伦

    黄轩

    郑爽

    此时样式为:

    e553a61ac71d507824434b6365570a76.png

    接下来,我们要对这个单选按钮进行美化了!

    二、我先给h2设置了正常粗细

    重点是按钮,每个按钮都包含在一个为.radioStyle的Div中,为了让这四个div既能并排显示,又能设置宽高,我们用inline-block:

    CSS代码:

    h2 {

    font-weight: normal;

    }

    .radioStyle {

    display: inline-block;

    }

    此时效果为:好啦!已经横排显示了!

    cbabd72e4d25945bb97e70c88093ea00.png

    三:隐藏按钮自带的样式

    我们使用 visibility: hidden(占位隐藏),为啥不用display:none呢,因为这个属性不光隐藏,而且原来的空间也不占据了,visibility:hidden可以在隐藏的前提下,空出原有的位置!

    隐藏之后我们好自己设置样式!

    CSS代码:

    .radioStyle input {

    visibility: hidden;

    }

    隐藏后的效果:且空出了原来样式按钮的位置

    c7857822e205e9338180d4edd5745168.png

    四:设置新的按钮样式

    我们先对input以及label元素设置鼠标点击时的样式,再设置个相对定位,后面要用该定位作为父元素!!

    CSS代码:

    .radioStyle input[type="radio"] + label{

    position: relative;

    cursor: pointer;

    }

    现在要开始给label加个样式,我们用伪类::before(此元素默认为行内元素)

    样式为18*18的正方形,然后设置圆角边框为50%,使其变为圆形。绝对定位后,用left、right、top、bottom自行调整位置

    CSS代码:

    .radioStyle input+label::before{

    content: '';

    position: absolute; /*父元素为label,针对父元素进行绝对定位*/

    left: -24px;

    width: 18px;

    height: 18px;

    border: 1px solid #999;

    border-radius: 50%; /*圆角边框*/

    }

    效果图为:

    c7b62d7a66b571baf49182c21950930d.png

    美化一下,当选中按钮之后,设置个边框阴影色,淡淡的蓝色

    CSS代码:

    .radioStyle input:checked+label::before {

    box-shadow: 0 0 6px #24b7e5;

    }

    input:checked表示input表单的选中状态

    label::afbefore为label的伪类样式

    input:checked+label::before,中间的 “+“ 是什么意思呢,就是input元素紧挨着的下一个元素label,我们用“+”号连接起来,表示input和label都会对此样式生效!就是你点击标签里的文字“李易峰”,它的圆按钮自动会是选中状态,且会应用淡蓝色的阴影样式!

    682d932324700540acbe95e8c563ea15.png

    接下来,我们要对选中的按钮设置选中的效果,给圆按钮里面加一个小实心圆。

    用伪类元素::after

    我给它宽高都为12px大小,因为要放在里面,对吧,小一点好。

    针对于父元素label绝对定位,然后调整位置(在谷歌浏览器里面用调试工具进行调试,决定好之后写入代码)

    最后给小圆点设置背景色,最好与外面的按钮边框颜色一致或接近,好看就行!!

    CSS代码:

    .radioStyle input:checked+ label::after{

    content: '';

    position: absolute; /*针对label进行绝对定位*/

    left: -20px;

    top: 4px;

    border-radius: 50%; /*设置圆角*/

    width: 12px;

    height: 12px;

    background: #24b7e5;

    }

    效果图附上:

    0641353e4650e52f282d7ef69ee349ef.png

    OK,到这里就大功告成啦!偷偷哭泣一下,写个文章真的不容易!!!

    展开全文
  • 单选按钮和多选按钮

    2016-03-11 16:17:59
    实现了单选按钮和多选按钮的选中和取消,点击单选和多选的响应事件
  • html学习——按钮与多选框

    千次阅读 2021-02-23 19:48:39
    多选框与按钮 上为演示效果下为代码 <form method="get" action="result.html"> <!--input:输入框标签,默认为text,文本框 name:为该输入框起一个名字,用来提交数据 maxlength="8":文本框最多可以输入...

    多选框与按钮

    上为演示效果下为代码

    <form method="get" action="result.html">
    <!--input:输入框标签,默认为text,文本框
    	name:为该输入框起一个名字,用来提交数据
    	maxlength="8":文本框最多可以输入8个字符
    	size="30":文本框的长度时30px
    -->
    	<p>用户名:<input type="text" name="username" value="文本框初始值"
    	maxlength="8" size="30"/></p>
    <!--密码框input type="password",密码框输入字符会显示为小圆点-->
    	<p>密码:<input type="password" name="pwd"/></p>
    <!--radio:单选框
    	value:初始值,单选框必须填
    	name:成组,否则单选会出现错误
    	input标签需要闭合
    -->
    	<p>性别:
    	<input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/></p>
    <!--checkbox:多选框
    	value:与选项对应的值
    	checked:默认选中,在input标签中使用
    -->
    	<p>爱好:
    	<input type="checkbox" value="sleep" name="hobby"/>睡觉
    	<input type="checkbox" value="code" name="hobby"/>敲代码
    	<input type="checkbox" value="chat" name="hobby"/>聊天
    	<input type="checkbox" value="game" name="hobby" checked/>游戏
    	</p>
    <!--按钮
    	button:普通按钮
    	type="image":图片按钮,用图片替换了按钮的样式
    	submit:提交按钮,将value的值提交给name对应的值
    	reset重置按钮,重置所有输入框
    	value:value的值即为按钮的名称
    -->
    	<p>按钮
    	<input type="button" name="btn1" value="点击变长"/>
    	<input type="image" src="1.jpg"/>
    	</p>
    	<p>
    	<input type="submit" value="提交"/>
    	<input type="reset" value="重置"/>
    	</p>
    </form>
    
    展开全文
  • HTML单选框-多选框-按钮

    千次阅读 2021-05-16 23:35:31
    DOCTYPE html> <!-- 表单元素格式: 属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、 file、hidden、image、和button。默认为text name 指定表单元素的名称 value ...
    <!DOCTYPE html>
    <!--
    表单元素格式:
      属性                                说明
      type           指定元素的类型。text、password、checkbox、radio、submit、reset、
                    file、hidden、image、和button。默认为text
      name          指定表单元素的名称
      value         元素的初始值。type 为 radio时必须指定一个值
      size          指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。
                    对于其他类型,宽度以像素为单位。
      maxlength     type为text或password时,输入的最大字符数
      checked       type为radio或checkbox时,指定按钮是否是被选中
    -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮和单选框和多选框</title>
    </head>
    <body>
    <form action="1.我的第一个网页.html" method="post">
    <!--   文本输入框:input type=“text”
    默认值初始值为 咕咕咕咕咕
    输入限制为8
    文本框尺寸为30
    -->
        <p>名字:<input type="text" name="username" value="咕咕咕咕咕" maxlength="8" size="30"></p>
    <!--    密码框:input type="password"   -->
        <p>密码:<input type="password" name="pwd"></p>
    
    <!--
    单选框标签:
    input type="radio"
    value:单选框的值
    name:表示组  如果name相同,表示同一个组,name不同,组不相同
    组不相同的话可以同时勾选
    -->
        <p>性别:
            <input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"></p>
    
    <!--
    多选框标签:
    input type="checkbox"
    -->
        <p>爱好:
            <input type="checkbox" value="smoking" name="hobby">抽烟
            <input type="checkbox" value="drink" name="hobby">喝酒
            <input type="checkbox" value="Scald" name="hobby">烫头
        </p>
    
    <!--
    按钮:
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
    -->
        <p>按钮:
            <input type="button" name="btn1" value="点击变大">
            <input type="image" src="../resources/image/1.jpg">
    
        </p>
        
        <p>
            <input type="submit">
            <input type="reset" value="清空表单">
        </p>
    
    </form>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • HTML|按钮和多选框

    千次阅读 2021-07-21 22:10:20
    HTML|按钮和多选框 1.多选框 和单选框相比,就是将type属性从radio改成了checkbox,比如我们建立一个爱好的多项选择: 有睡觉,篮球,足球和编程: <!DOCTYPE html> <html lang="en"> <head> &...
  • --按钮 input type="button" //普通按钮 input type="image" //图像按钮 inp ut type="submit" //提交按钮 input type="reset" //重置按钮 --> 按钮: 点击变长"> 截图20211026123053.png "> </p> 国家: 列表名称">...
  • content” android:layout_height=“wrap_content” android:text=“HTML” /> android:id="@+id/check2" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:text=“C” /> ...
  • 单选按钮和多选按钮的样式设置

    千次阅读 2017-02-16 12:54:38
    单选按钮和多选按钮的样式设置 <div class="choice"> 您的性别: 男<input type="radio" name="radio" value="1" checked><i></i></label> 女<input type="radio" value="2" name="radio"><i></i></...
  • 【前言】本文简单介绍一种优化自定义单选和多选框样式的方法【主体】原理:(1)利用label关联标签进行模拟,然后将原选择的按钮隐藏;(2)选中样式设置:input[type="radio"]:checked+label和input[type="checkbox"]:...
  • 最近才开始写博客,所以把前几个月做项目时遇到的问题整理一下写出来,众所周知,表单中的一写元素原生样式不是很好看,项目中用到的时候需要优化,今天我就写一下单选按钮很多选按钮的样式的优化,首先自己要做出...
  • HTML中select标签如何实现单选和多选发布时间:2020-09-29 17:01:54来源:亿速云阅读:105作者:小新这篇文章主要介绍了在HTML中select标签如何实现单选和多选,具有一定借鉴价值,需要的朋友可以参考下。...
  • html:form   action ="/checkBox" >    Username :  < html:text   property ="username" /> < br />    password :  < html:password   property ="password" /> < br />    Hobby: < br />     ...
  • Layui 多选按钮(可添加,可删除) layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'checkbox'], function () { var laydate = layui.laydate //日期 , ...
  • html使用vant标签栏(多选

    千次阅读 2020-01-02 15:07:00
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
  • HTML5 按钮,多选框,单选框
  • HTML:select2多选下拉框

    千次阅读 2022-05-07 16:45:48
    1、Head标签内引入所需要的链接css样式 <th:block th:include="include :: select2-css" /> 2、在需要整多选下拉框的地方加入这个 <div class="form-group"> <label class="col-sm-3 ...
  • 这两天因为搞这个东西头发都快点完了,因为是初学者所以很多都需要...HTML代码 <div id="stuName"> <input type="button" class="btn btn-danger" value="小明01"> <input type="button" class="...
  • HTML: Ie7,ie8,ff兼容,多选按钮checkbox标签后文字居中? 如图: 代码:全选
  •  往常我们画一条横线直接用标签即可,当画一条竖线的时候发现找不到标签。在网上查找了一下资料,大致推荐用js来做。小弟比较偏执想用纯css来做,最终找到了解决方法,下面我就来分享一下我的做法。  在两个子div...
  • 这次给大家带来在HTML中select标签怎样实现单选和多选,在HTML中select标签实现单选和多选的注意事项有哪些,下面就是实战案例,一起来看一下。select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的...
  • input标签多选

    千次阅读 2018-02-01 16:58:27
    ① 全选按钮: ② 选择项 jQuery: $(function() { $("#checkall").click(function() { if ($("#checkall").is(':checked')) { $("input[jtype='checkbox']").prop('checked', true); } else
  • AngularJS实现多选按钮

    千次阅读 2017-01-19 10:39:00
    使用AngularJS实现多选按钮组,按钮样式使用bootstrap,效果图如下: html页面代码: class= "btn btn-default est-lab" ng-class="{true: 'selecte-on', false: 'selecte-off'}[vm.reasonStr.indexOf('a')...
  • HTML部分: //容器 <div class="container"> <div class="all"> 全选<div class="checkbox"></div> </div> <div class="btns"> <div class="checkbox"></div...
  • 单选表格 1 单选表格 # id 1 2 3 当前选择: 多选表格 12 多选表格 id 1 2 3 当前选中:
  • html控件默认样式都不好看,需要css来美化,本文介绍的checkbox多选框和radio单选按钮也不例外,美化工作需要css+图片来完成。漂亮的checkbox多选框和radio单选按钮实际使用中,除了用css和图片来美化样式效果之外,...
  • iOS-按钮单选与多选逻辑处理

    千次阅读 2018-02-20 12:08:22
    循环创建按钮, 进行按钮单选或者多选的操作.
  • input多选按钮变成圆形按钮;点击时状态改变(checked)属性与点击触发事件的优先顺序

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,879
精华内容 7,551
关键字:

html多选按钮标签

友情链接: CPP-Builder.zip