CSS3自定义radio_striveYan的博客-程序员宅基地

HTML部分代码

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form>

CSS代码

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}
.wrapper {
  margin-bottom: 10px;
}
.box {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  background: orange;
  vertical-align: middle;
  border-radius: 100%;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}

.box span { 
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  background: #fff;
  top: 50%;
  left:50%;
  margin: -5px 0  0 -5px;
  z-index:1;
}

input[type="radio"] + span {
  opacity: 0;

}
input[type="radio"]:checked + span {
  opacity: 1;
}

效果图预览

C333自定义radio效果图

本文链接：https://blog.csdn.net/fenqiang12138/article/details/51786247

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JNI字段描述符_jni int_directdraw的博客-程序员宅基地

“([Ljava/lang/String;)V” 它是一种对函数返回值和参数的编码。这种编码叫做JNI字段描述符（JavaNative Interface FieldDescriptors)。一个数组int[]，就需要表示为这样"[I"。如果多个数组double[][][]就需要表示为这样 "[[[D"。也就是说每一个方括号开始，就表示一个数组维数。多个方框后面，就是数组的类型。_jni int

《操作系统》实验报告——进程通信_进程间通信实验报告_Starzkg的博客-程序员宅基地

理论知识Linux——Linux C语言编程基础知识Linux——进程通信一、实验目的(1) 熟悉并掌握管道机制，并实现进程间通信(2) 熟悉并掌握共享内存机制，并实现进程间通信二、实验内容任务一：（1）阅读以上父子进程利用管道进行通信的例子（例1），写出程序的运行结果并分析。（2）编写程序：父进程利用管道将一字符串交给子进程处理。子进程读字符串，将里面的字符反向后再交给父进程，父进程最后读取并打印反向的字符串。任务二：（1）阅读例2的程序，运行一次该程序，然后用_进程间通信实验报告

matlab smulink笔记03——过零检测_过零检测算法_有情怀的机械男的博客-程序员宅基地

★过零检测变步长解算方法动态地评估计算下一个采样时刻所使用的步长，当前后两个采样点的状态值变化大时，则缩小采样步长，当前后两个采样点的值变化小时则增大步这种做法使得解算器在计算不连续临近区域时使用较小的步长，因为不连续点临近区城值的变化幅度大。这种做法能保证计算的精确度,但却有可能因采样过于密集,步长过小而导致仿真时间太长。Simulink使用过零检测技术精确定位不连续点,防止仿真时间太长,一般情况下能够提高仿真速度,但有可能使得仿真到达规定时间长度之前就停止。..._过零检测算法

Mybatis动态sql拼接多个like模糊查询_mybatis多个like_C_wl000641的博客-程序员宅基地

1. 业务描述 keywords是一个ArrayList集合,其中包含了若干String类型关键字,需要根据不同的关键字进行模糊查询匹配_mybatis多个like

java常见问题（一）_java实验中常见问题_高二的笔记的博客-程序员宅基地

1.文本域如何添加滚动条packagetest;importjava.awt.*;importjavax.swing.*;publicclassgaoextendsJFrame{JTextAreajtext=newJTextArea();JScrollPanejs=newJScrollPane(jtext);//滚动条pu..._java实验中常见问题

十行Python代码爬取豆瓣电影Top250信息_python用requests爬电影的最简单jihangdaima_WaltonZhong的博客-程序员宅基地

今天讲的实例就是用Python爬取豆瓣Top250的电影信息（包含电影排名、电影名、评分、链接），仅用十行代码即可实现，内容简单易上手，小白看完也能学会。_python用requests爬电影的最简单jihangdaima