表单checkbox及radio美化效果代码

代码语言:html

所属分类:表单美化

代码描述:表单checkbox及radio美化效果代码

代码标签: radio 美化 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background: #54bded;
  color: #fff;
  padding-top: 20px;
}

form {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 30px;
  line-height: 3;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
}
h1 span {
  margin-top: 10px;
  display: block;
  font-weight: 300;
  font-size: 70%;
  line-height: 1.2;
}

div.controls {
  margin-bottom: 12px;
  border: 1px dotted #fafafa;
  padding: 25px 20px;
  position: relative;
  margin-bottom: 20px;
}
div.controls h1 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
  position: absolute;
  left: 10px;
  top: -10px;
  padding: 0 10px;
  color: #fafafa;
  background-color: #54bded;
}

input[type='radio'],
input[type=.........完整代码请登录后点击上方下载按钮下载查看

网友评论0