按鈕 開關 單選,多選

最新推荐文章于 2021-05-01 14:31:44 发布
最新推荐文章于 2021-05-01 14:31:44 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML5 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/losedguest/article/details/78918212
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<script type="text/javascript" src="JS/jquery.js"></script>
<script>
$(document).ready(function () {
$(".lxui-switch").click(function(){
var dom=$(this);
if(dom.hasClass("lxui-off"))
{
dom.removeClass("lxui-off");
dom.addClass("lxui-on");
dom.find(".lxui-switch-text").text("啟用");
}
else
{
dom.addClass("lxui-off");
dom.removeClass("lxui-on");
dom.find(".lxui-switch-text").text("禁用");
}
})
})
</script>
<style>
.lxui-btn{
    border-radius: 5px;
    font-size: 12px;
    outline: 0;
    display: inline-block;
    vertical-align: middle;
    moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;  
}
.lxui-btn-text{
    color: #fff;
    vertical-align: top;
    text-align: center;
    height: 26px;
    line-height: 25px;
    padding: 0 5px;      
    cursor: pointer;
    border-radius: 5px;
    border-color: #459830;
    display: inline-block;
     border: 1px solid #999;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAcCAMAAACgTerKAAAAA3NCSVQICAjb4U/gAAAAVFBMVEVsu1prullquVhpuVZouFVmt1NktlFjtVBhtU5ftExes0pcskhasUZYsERWrkFUrT9SrD1QqztOqjlNqTdLqDVJqDNIpzFGpjBFpS5CpCtDpC1Boyrl/2+uAAAACXBIWXMAAArwAAAK8AFCrDSYAAAAFnRFWHRDcmVhdGlvbiBUaW1lADA0LzEyLzEyiu5yJQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAABOSURBVEiJvcGHAUAwAADBV6MTJNr+e9ri78BQCCgFVAJqAY2AVkAQ0AnoBQwCRgGTgFnAImAVsAmIAnYBh4BTQBKQBVwCbgGvgEfAJ/gBUt6TqcmCyTYAAAAASUVORK5CYII=) repeat-x
}
.lxui-btn-text:hover{
 border: 1px solid #fff; 
}
.lxui-btn-cicle{
 border-radius: 20px;
}
.lxui-switch{
cursor: pointer;
}
.lxui-off{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAYCAMAAACWXbB1AAAAA3NCSVQICAjb4U/gAAAAz1BMVEXf39/T09O4uLhzc3NWVlZ9fn3f39/V1dXf39/V1dW4uLjf39+8vLzf39/b29vV1dXHx8ff39/V1dW8vLzf39/Z2dnHx8fBwcHf39/f39/X19fV1dXFxcXf39/b29vPz8/Dw8Pf39/d3d3V1dXR0dHf39/R0dHFxcX7+/v5+fn39/f19fXz8/Px8fHv7+/t7e3r6+vp6enn5+fl5eXi4+Lh4eHf39/d3d3b29vZ2dnX19fV1dXT09PR0dHPz8/MzMzJycnHx8fFxcU9VqUxAAAARXRSTlMAEREREREiMzNERERVVWZmZmZ3d3eIiIiImaqqqqq7u7vM3d3d3e7u7v+819RnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADIwMTMuOS40WcX9jgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAFASURBVDiNxVTXcoMwEDynV6c3J7ETpwshgcAIiWYc//83RZAxQ0ky3FP2cUe33C53B1Bi7WjypLVSKuyN6Xg4gBou1Uy4Dmc2JeSjJwh15UWlsKdnDrdNMbE5p71FDNxw91tiR3uOtWIth1l/VbVgy+1S49Z36jROhN0UEmdSNNt3GcqOyWQ98miTpQKTCZEDOFaiTQuOaUQcwJ3kbZYL+tPjX2CP4DnoRGj5NsbMFJKgSwcoMyG8ye57idR4UR3zFkrDeHnQbpt1UV5MpidJ2GkOlakYwsY8Yk2Sacy/LWYMrrK48VUSoawUsw6b92lUqyGRwsw6G5V7u5+nSTWrPNEeYudWuw+HeZ7FPjUnyI8z5SF2v7pBxs71Ii8wT3Ug+ko0b6ER2Tp/fF8uPxfzNNY97/Lr+LRxkwuZEvBf+AL1MuhFCXBOVAAAAABJRU5ErkJggg==) no-repeat
}

.lxui-on{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAYCAMAAACWXbB1AAAAA3NCSVQICAjb4U/gAAABSlBMVEX///9jvWJJjEkrUysAAAAdNx0WKRUHDgcAAAAiQSJjvWJjvWJXpVZSnVFjvWJaq1lLj0pKi0lGhkVFhURjvWJjvWJbrlpaq1lWpVRNlExjvWJcr1tSnVFNlExLkUtjvWJes11dqVxYoldjvWJntGZksWNepF1bnVpQmE/y9/Lx9/Hx9vHq8+np8une7t3h7eHf7t/d7N3c6dzS59LQ49DD4MPA37+/2L+71buz1bOp1Kiv0q6q06mlz6SizKKlyaWhyaGZzJmdyJ2ixqGUyZOTx5KUwZOPu4+OvI1/wH55uXhjvWJuuW1ivGFiu2F1s3VhuWBgt19guF9otGdktGNftV5jtGJ1rHRtsG1es11dslxnrGZesF1cr1tbrlparVpaq1lZqVhYqFdXp1ZgpF9XpVZgoF9coFtWoVVVolRSnVFWm1ZQmE/SkMUgAAAAbnRSTlMAERERESIiIiIzVWZmZnd3d3eIiJmqqqqqqru7u7vM3d3d3e7u7u7u7v///zRVVCAAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMjAxMy45LjRZxf2OAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAATpJREFUOI2t1FdbwjAUBuCqx4mCe+DeBnHviXvW1gSNSrXUhSL6/29NBaVNb3LU7we8T87Jl2jaf6UkFO3VFWNQxlNXZ32dkVIvER5UBXSdstTJ0jghZGptKFIkWtQFg/LLRVJIbL+1rEA0qxM65RczpJiNtjwRQhAmu5sn3hzUfq1TeZnuMawdH0Fiw+40NZhj8PSE3yCbdbiFimOcSgSZbQdNw4yStBOyQfqFgSAM5qwGjBthIOpl8Pv1gHGLm0UYuwFjAHAlZc65TMx1Aa5iSTs7KRnb9YDrGLWeDqWOjZQDrusmd7ILPuO4AbDPllqPz9MeYqsDAPv2TWZnXpe/hfhRdwXg/yDK05nc9UrcvZG90cbKH0IsNhxVY8QfZD+85T7eX8Z6mqrBQ+ACAFVu4PdEXoG/CYF8Am6ZRqxHe1ZuAAAAAElFTkSuQmCC) no-repeat
}
.lxui-off .lxui-switch-text {
    color: #ccc;
    padding-left: 23px;
}
.lxui-off .lxui-switch-text {
    color: #ccc;
    padding-left: 23px; 
}
.lxui-on .lxui-switch-text {
    padding-left: 7px;
    color: #fff;
}
.lxui-switch-text {
    display: block;
    width: 3em;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    vertical-align: top;
}


.ipt-checkbox, .ipt-radio {
    padding: 0;
    height: 18px;
    width: auto;
    cursor: default;
    /*line-height: 0;*/
    font-size: 0;
    border: 0;
    border-radius: 0;
}

.ipt-checkbox input[type="checkbox"]{
    display: none;
}
.ipt-checkbox input[type="checkbox"]+label {
    display: inline-block;  
    text-align: left;
    -webkit-box-sizing: border-box;
}

.ipt-checkbox label::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;  
    vertical-align: middle; 
    margin-right: 5px;
    -webkit-box-sizing:border-box;
    border-width: 1px;
   border-style:inset; 
   border-color: #ddd; 
}

.ipt-checkbox input[type="checkbox"]:checked+label::before{
    background-color: #38c;
    border-color: #38c;
    color: #fff;
    text-shadow: 0 1px 0 #059;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAE5JREFUOMu10DEKACEQQ1GPHl2QxUvHZsURQRJhfzfFKzIp/R1JkISLMmdQUeEebtAKvw053I+KRuUGncLpYxoS9kgfrDYK+LVRwM1GTh2KeDEWoG7NGwAAAABJRU5ErkJggg==);
    background-position:center,center;
    background-repeat:no-repeat;
}



.ipt-radio input[type="radio"]{
    display: none;
}
.ipt-radio input[type="radio"]+label {
    display: inline-block;  
    text-align: left;
    -webkit-box-sizing: border-box;
}

.ipt-radio label::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;  
    vertical-align: middle; 
    margin-right: 5px;
    -webkit-box-sizing:border-box;
    border-width: 1px;
   border-style:inset; 
   border-color: #ddd; 
   border-radius:20px;
}

.ipt-radio input[type="radio"]:checked+label::before{
    background-color: #38c;
    border-color: #38c;
    color: #fff;
    text-shadow: 0 1px 0 #059;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAE5JREFUOMu10DEKACEQQ1GPHl2QxUvHZsURQRJhfzfFKzIp/R1JkISLMmdQUeEebtAKvw053I+KRuUGncLpYxoS9kgfrDYK+LVRwM1GTh2KeDEWoG7NGwAAAABJRU5ErkJggg==);
    background-position:center,center;
    background-repeat:no-repeat;
}
</style>
</head>
<body>
  <div class=" lxui-btn ">
  <span class="lxui-btn-text">新建来信</span>
  </div>  

  <div class="lxui-btn lxui-btn-cicle">
  <span class="lxui-btn-text lxui-btn-cicle">新建来信</span>
  </div>
  <div class="lxui-switch lxui-on">
  <span class="lxui-switch-text">啟用</span>
  </div>
    <div>
        <span class="ipt-checkbox"><input name="checkbox-1" id="checkbox-1" type="checkbox"><label for="checkbox-1"></label></span>
    </div>
    <div>
        <span class="ipt-radio"><input name="radio-1" id="radio-1" type="radio"><label for="radio-1"></label></span>
        <span class="ipt-radio"><input name="radio-1" id="radio-2" type="radio"><label for="radio-2"></label></span>
    </div>
</body>
</html>

这里写图片描述

losedguest
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
产品经理的分类和职责
09-03 2921
把产品经理的岗位职责熟记于心，是成功入职产品经理岗位的重要一步。1.2.1　三种产品观在具体阐述产品职责的分类前，需要首先交代一下“产品观”的概念。显然，比起公司或者团队给出的职能定义，个人的“产品观”具有更强的决定性作用。下面3个问题可以用来定义“产品观”：1）你认为产品经理应该做什么事情？2）产品经理岗位的哪些特点最吸引你？3）假如有一天你遇到了各种艰难困苦，被迫要做很多自己不情愿的事情，那么产品经理岗位的哪些特性将支撑着你坚持下去？只有明确自己的产品观，才能让你在后续的职业生涯中锁定目标，并坚定前行。
全球最大同性交友平台骚操作
流星泪
11-25 2万+
文章目录搜索快捷键插件 github作为全球最大代码库，日常学习or工作都离不开她，这里介绍一些平时使用方面的技巧。 搜索 比如我们需要搜索spring boot相关的项目，如果直接搜索spring boot，结果如下： 可以看到搜索结果由约有15万个，想找到一个我们想要的项目犹如大海捞针。 如果我们换种方式搜索：spring boot in:name 效果显而易见，搜索结果数量降到了10万左...
官宣，史上最全配色网站汇总
weixin_30693683的博客
08-29 1214
我们在后台了解到大家总是会为配色烦恼，所以为大家搜罗来一些好看、好玩又好用的配色网站。总有一款能够帮到你！ 网站超级多，于是给它们分了八大门派，大家可以挑选自己喜好的门派进行修炼啦！ 推文导读 随性派：处处感受随机的惊喜 灵感派：时时积累设计师的灵感 渐变派：美轮美奂的渐变海洋 美图派：有了美图就有了色彩 文艺派：文艺古典的全套配色 原理派：理性直达专业配色 ...
https://vwo.com/ab-testing/
a19576的专栏
01-18 2468
https://vwo.com/ab-testing/
产品经理笔试：其他答题注意事项
09-18 913
1.线上答题 1）选择环境好的地方，线上答题最怕网络崩溃，挑选网络较稳定的地点做题。对比教学楼与宿舍，教学楼会是相对较好的场所，因为宿舍通常比较吵，容易分散精力。 2）提前检查各种软件：由于线上答题系统不是面向广大网民的产品，所以在网页适配上会比较挑剔，请确保计算机上有谷歌浏览器和IE浏览器这两款通常能适配线上答题系统的浏览器。办公软件三件套正常运行，有截图软件和作图软件。条件好的话有另外一台计算机作为备用。 3）设置闹钟，线上答题没有监考老师进行时间提醒，一旦知道了考试时长，请立即设置闹钟提醒交卷。 4.
产品经理群面讨论技巧
09-18 1687
下面是本节重点，即正式的群面解析。 群试的步骤一般是：首先，接受问题，成员各自分别准备发言提纲；其次，小组成员轮流发言，阐述自己观点；再次，成员交叉讨论，汇总得出最佳方案；最后，解决方案总结并汇报讨论结果。但整体流程并不固定，只要可以进行充分的讨论并形成结果即可，所以其中有较多可以发挥的地方。 因为群面考查的是大家的协作能力，因此在初始部分，个人需要迅速地找到自己在整场面试中的角色。群面考查的标准是你的角色清晰且在选定的角色上拥有足够的贡献。如果一方面没有在自己的角色方向表现出色，另一方面又胡乱地参与到其.
单选多选按钮样式
09-14
单选多选按钮样式 <!-- 在这里放置你的HTML代码 --> ``` 现在，你可以在自己的项目中引入`demo.css`文件，为你的单选和多选按钮赋予同样的样式。通过这种方式，你可以自由地定制按钮的外观，同时保持其功能不...
jQuery单选多选按钮选中美化特效.zip
07-05
jQuery单选多选按钮选中美化特效就是为了解决这个问题，通过使用jQuery和CSS3技术来提升表单组件的视觉效果和交互体验。这个特效使原本单调的单选按钮和复选框变得更具吸引力，为用户提供更友好的界面。 首先，...
Bootstrap复选框和单选按钮美化插件
08-23
此外，还有一些插件如"Bootstraptoggle"或"Bootstrap-checkbox-radio"，它们不仅关注视觉美化，还增加了更多的交互功能，比如开关按钮效果或动态改变状态。这些插件可能需要通过JavaScript进行初始化，并且可以方便...
ios-button的单选与多选.zip
07-11
本教程将详细讲解如何在iOS应用中创建和管理单选和多选的按钮。 1. **单选按钮（Radio Button）**： 单选按钮允许用户在一组选项中选择一个，但不能同时选择多个。在iOS中，我们通常使用Segmented Control或自定义...
一个ImageView，单选复选按钮，开关按钮的例子
07-30
接下来，单选按钮（RadioButton）和复选按钮（CheckBox）常用于实现多选一或多选多的功能。它们属于`RadioGroup`或`LinearLayout`的一部分。例如，创建一组单选按钮： ```xml android:id="@+id/radioGroup" ...
IPV6网站
cw_xue的博客
04-25 7475
IPV6的几个测试网站 IPV4的IP地址即将用尽，IPV6的使用即将提上日程。当前测试IPV6时，可以使用下面几个网站。可以检查访问这些网站时，是否为IPV6访问。 1、https://ipv6-test.com/ 可以ping IPV4和IPV6的数据 2、https://www.china-ipv6.cn/#/ 访问时，在界面显示对应的访问IP地址 3、http://test-ipv6.com/ 检查访问状态 ...
win10浏览器如何访问ipv6网址
热门推荐
gulaixiangjuejue的博客
01-07 8万+
什么是ipv6？ IPv6是下一版本的互联网协议，也可以说是下一代互联网的协议，它的提出最初是因为随着互联网的迅速发展，IPv4定义的有限地址空间将被耗尽，地址空间的不足必将妨碍互联网的进一步发展。为了扩大地址空间，拟通过IPv6重新定义地址空间。IPv6采用128位地址长度，几乎可以不受限制地提供地址。按保守方法估算IPv6实际可分配的地址，整个地球的每平方米面积上仍可分配1000多个地址。在...
Ubuntu19.1 中 GitLab 的安装配置与卸载
WS的小屋
02-29 5003
在Ubuntu19.1上面搭建gitlab的服务器，使自己的服务器可以作为独立的代码托管网站。本教程包括安装与卸载流程还有遇到的问题，全面的从零开始搭建环境。包括gitlab邮件的配置。
nginx绑定https证书，保证http和https都能访问
fyonecon
12-11 2983
- 1） 1）申请证书，这里以申请免费证书为例 参考博客申请即可https://blog.csdn.net/weixin_41827162/article/details/100688681 1-1）【DNS法验证（如果选择了文件法验证，就根据官方教程引导完成文件验证即可）】绑定并验证域名： 利用工具得到如下文件： 2）在nginx服务器新建目录，并将两个文件放入其中： ...
逆向入门，一个变形程序的逆向过程。
stboy14的博客
06-22 1275
记录教程的课后作业心路。 要求去掉该程序的nag窗口。 先运行一遍查看情况。 首先试试最简单的办法，字符串查找大法。 很简单就找到了我们想要的字符串。 就在开始的下面，直接上断点爆破试试。 但是在单步调试的时候，发现出现nag窗口时，程序并没有经过这个函数。 **就知道没这么容易，这个字符串就是个幌子而已。 ** 那我就试试，查看它调用了哪些函数吧，但是下了断点却报错了。 只好慢慢来了...
linux登陆端口号和协议,linux iso镜像下载 协议号与端口号大全
weixin_33404102的博客
05-01 490
原标题：协议号与端口号大全 - 【路由交换技术】协议号与端口号大全 - 【路由交换技术】协议号是存在于IP数据报的首部的20字节的固定部分，占有8bit.该字段是指出此数据报所携带的是数据是使用何种协议，以便目的主机的IP层知道将数据部分上交给 哪个处理过程。也就是协议字段告诉IP层应当如何交付数据。而端口，则是运输层服务访问点TSAP，端口的作用是让应用层的各种应用进程都能将其数据通过端口向下交...
局域网IP查询
↓
05-21 1万+
1.linux局域网ip查询 nmap -sP 192.168.1.0/24  查询192.168.1段内可ping通的所有ip并打印到屏幕上，还有很多参数，具体如下： -iL &lt;inputfilename&gt;：从主机/网络列表中输入 -iR &lt;num hosts&gt;：选择随机目标 --exclude &lt;host1 [，host2] [，host3]，......
轮盘抽奖代码
diantiaozhu8383的博客
05-12 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640,user-scalable=no,target-densitydpi = dev...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值