zoukankan      html  css  js  c++  java
  • 自定义按钮样式

    在一些网站上经常可以看到改造过的按钮选项比如这样

    clipboard.png

    clipboard.png

    由于之前一直在B端企业,样式差不多就Ok了所以也没去研究。昨天刷百度前端学院的时候遇到一个题就是改造checkbox radio样式的,大概研究一番

    最常见的自定义按钮样式,其实是用label模拟的,关于label可以在mdn进行查阅

    label的for与表单的id对应,点击click对应的表单被激活
    <label for="demo">click</label>
    <input type="text" id="demo"/>

    通过上面的例子知道了,只要label的for属性和表单的id对应,那么点击label就等于点击表单
    这样我们可以通过把原本的input隐藏掉,改造label的样式就好了,来个最简单的实现

    css
    label { 16px;height: 16px;border:1px solid #d9d9d9;display:flex}
    input {display: none}
    .demo:checked+label {border: 1px solid red; font-weight: 700;}
    .demo:checked+label::after {margin: auto;content: '';color: red; 8px;height: 8px;line-height: 8px;text-align: center;font-size: 12px;border-radius: 50%;background: red;}
    
    html
    <input type="radio" name="sex" id="radioBox" class="demo">
    <label for="radioBox"></label>
    <input type="radio" name="sex" id="radioBox1" class="demo">
    <label for="radioBox1"></label>
    
  • 相关阅读:
    learn go memoization
    learn go return fuction
    Java5 并发学习
    Java中的protected访问修饰符
    LinkedBlockingQueue
    BlockingQueue的使用
    Java并发编程:Callable、Future和FutureTask
    Java线程池的工作原理与实现
    SQL Server中Delete语句表名不能用别名
    请问JDBC中IN语句怎么构建
  • 原文地址:https://www.cnblogs.com/10manongit/p/13037715.html
Copyright © 2011-2022 走看看