css按钮怎么去除背景,更改按钮单击背景,仅使用CSS?-程序员宅基地

技术标签: css按钮怎么去除背景  

小编典典

基于我在评论中发布的小提琴,我对它进行了少许修改,以使用Bootstrap按钮CSS。

只需包含Bootstrap的CSS文件,然后使用以下代码即可。

HTML

Toggle background colour

CSS

div {

width: 100%;

height: 100%;

background: #5CB85C;

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

label.btn {

position: absolute;

top: 10px;

left: 10px;

z-index: 2;

}

input[type="checkbox"]{

display: none;

}

input[type="checkbox"]:checked + div{

background: #5BC0DE;

}

这将使用相邻的兄弟选择器。

它在这里起作用:(我已经添加*-user-select:none;了防止选择标签文本的标签,但是标签不是必需的)

浏览器支持

Chrome,Firefox [Desktop&Mobile](Gecko)≥1.0,InternetExplorer≥7,Opera≥9和Safari≥3参考:属性选择器和相邻的同级选择器

2020-05-16

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39965673/article/details/119402122

智能推荐

oracle默认用户名、密码_搜索了解各个常用系统的默认账号密码,如mysql,oracle,邮件服务器等等-程序员宅基地

文章浏览阅读710次。用户名 / 密码登录身份说明sys/change_on_installSYSDBA 或 SYSOPER不能以 NORMAL 登录,可作为默认的系统管理员system/managerSYSDBA 或 NORMAL不能以 SYSOPER 登录,可作为默认的系统管理员sysman/oem_temp sysman 为 oms 的用户名s_搜索了解各个常用系统的默认账号密码,如mysql,oracle,邮件服务器等等

echarts 树图样式美化_echarts2 tree树图自定义显示缩放大小、位置-程序员宅基地

文章浏览阅读2.7k次。<>看到网上关于echarts tree的资料有点少,做项目恰巧遇到这个,把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置,并不能指定树图整体的大小以及其整体在dom显示的位置,在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart = echarts.init(dom); chart.getZ..._echarts 树图美化

(前后端分离)SpringBoot+Vue实现视频播放_vue+springboot推本地长视频流实现前端能边播放边加载,可以拖动进度-程序员宅基地

文章浏览阅读10w+次,点赞29次,收藏137次。跳坑日志SpringBoot+vue的项目中,实现前端播放视频SpringBoot 定义GET请求ApI,返回视频流,前端通过话不多说,走起一、新建如下类,用于返回视频流import org.springframework.core.io.FileSystemResource;import org.springframework.core.io.Resource;i..._vue+springboot推本地长视频流实现前端能边播放边加载,可以拖动进度

推荐一款高效实用的 Android UI 组件:Android PickerView-程序员宅基地

文章浏览阅读300次,点赞5次,收藏9次。推荐一款高效实用的 Android UI 组件:Android PickerView项目地址:https://gitcode.com/Bigkoo/Android-PickerView在 Android 开发中,我们常常需要实现类似轮盘选择器的功能,如日期选择、选项列表等。Android-PickerView 是一个由 Bigkoo 开发的开源库,它提供了简单易用且高度可定制化的选择器组件,极..._android:三级联动 android-pickerview

探索前沿:Argon React Native - 打造现代化移动应用的新框架-程序员宅基地

文章浏览阅读520次,点赞9次,收藏12次。探索前沿:Argon React Native - 打造现代化移动应用的新框架项目地址:https://gitcode.com/creativetimofficial/argon-react-nativeArgon React Native 是一个由Creative Tim团队开发的开源项目,它基于React Native和Material-UI设计系统构建,旨在为开发者提供一个快速启动移动应...

Centos系统安装proxychains-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏6次。Centos系统安装proxychainslinux下代理一般是通过http_proxy和https_proxy这两个环境变量,但是很多软件并不使用这两个变量,导致流量无法走代理。 在不使用vpn的前提下,linux并没有转发所有流量的真全局代理。但是可以用proxychains-ng为程序指定走代 理,proxychains-ng是proxychains的加强版,主要有以下功能:1、支持http/https/socks4/socks52、支持认证3、远端dns查询4、多种代理模式不足

随便推点

传神语联何恩培:别着急唱衰机器翻译 未来将是人机共译时代-程序员宅基地

文章浏览阅读457次。机器翻译替代简单劳动,复杂劳动、智慧劳动人来做,这就是传神“人机共译”正在做的事情。前几天,腾讯同传作为机器翻译产品的代表,成为了博鳌论坛开幕式及部分核心论坛的同声传译;..._遇到文化障碍时机器翻译应该怎样与人类翻译相结合

一个托盘程序演示 -闹钟 Alert_alert演示-程序员宅基地

文章浏览阅读572次。程序运行效果截图:关键字:托盘 Tray   想必大家都看见过那些在系统托盘(Tray)中的程序吧,本文就演示了如何创建一个这样的托盘程序Alert。Alert是一个运行在系统托盘中的小闹钟,它在设定的时间后触发,运行屏幕保护程序并播放一首歌曲。这个程序是很久以前写的了,而我现在_alert演示

MySQL数据库字符集乱码问题MySQL解压版安装教程,Javaweb面试问题-程序员宅基地

文章浏览阅读277次,点赞4次,收藏8次。金三银四马上就到了,希望大家能好好学习一下这些技术点学习视频:大厂面试真题:技术点学习视频:[外链图片转存中…(img-yhnx5Fkq-1711573187465)]大厂面试真题:[外链图片转存中…(img-VNH7iKv7-1711573187466)]

用itertools.product简化嵌套for循环-程序员宅基地

文章浏览阅读391次。今天这一题叫做“偷瞄到的密码”:警察跟踪一名窃贼来到了一个仓库门前。仓库的密码锁盘如下:1 2 34 5 67 8 9 0窃贼输入密码后进了门。警察“觉得”自己看到了密码比如1357,但是也有可能是相邻的数字(相邻仅包括正上下左右,不包括对角线),比如第一位不是1,而是相邻的4和2(不包括5)。可能的密码是哪些组合呢?这道题目可以抽象成:1. 0..._itertools.product 如何控制一层循环

STM32开发——串口通讯(第1篇)——蓝牙(非中断+中断)_stm32蓝牙串口接收发送-程序员宅基地

文章浏览阅读3.2k次,点赞5次,收藏34次。通过中断的方法接受串口工具发送的字符串,并将其发送回串口工具。串口发送数据,使用超时管理机制串口接收数据,使用超时管理机制串口中断模式发送串口中断模式接收作用:以阻塞的方式发送指定字节的数据形参 1 :UART_HandleTypeDef 结构体类型指针变量形参 2:指向要发送的数据地址(指针),(用数组时不用取地址)(用字符变量需要取地址&)形参 3:要发送的数据大小,以字节为单位 strlen(ch)形参 4:设置的超时时间,以ms单位,最大0xffff。_stm32蓝牙串口接收发送

CTF相关之代码py报错 from secret import FLAG ImportError: cannot import name ‘FLAG‘ from ‘secret‘_cannot import name 'flag' from 'secret-程序员宅基地

文章浏览阅读3.7k次。运行python代码时报错: from secret import FLAG ImportError: cannot import name 'FLAG' from 'secret' (D:\python.10\lib\site-packages\secret\__init__.py)_cannot import name 'flag' from 'secret