input获得的按钮样式

最新推荐文章于 2025-01-18 00:15:00 发布

weixin_42489900

最新推荐文章于 2025-01-18 00:15:00 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

文章标签： input web

本文链接：https://blog.youkuaiyun.com/weixin_42489900/article/details/89357409

本文介绍了如何使用CSS实现一个自定义样式的input按钮。通过设置box-shadow, border-radius等属性，创建带有圆角和阴影效果的按钮。当input被选中时，背景颜色和内部元素位置会发生变化，实现视觉上的切换效果。" 132810800,19694772,C++中使用Boost.bind进行函数组合,"['C++编程', 'Boost库', '函数式编程', '泛型编程']

.choose-label {
   box-shadow: #ccc 0px 0px 0px 1px;
   width: 40px;
   height: 20px;
   display: inline-block;
   border-radius: 20px;
   position: relative;
   background-color: #bdbdbd;
   overflow: hidden;
}

.choose-label:before {
   content: '';
   position: absolute;
   left: 0;
   width: 20px;
   height: 20px;
   display: inline-block;
   border-radius: 20px;
   background-color: #fff;
   z-index: 20;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.chooseBtn:checked+label.choose-label:before {
left: 20px;
}

.chooseBtn:checked+label.choose-label {
background-color: #51ccee;
}