首页 > 开发 > CSS > 正文

使用CSS3美化HTML表单的技巧演示

2024-07-11 08:32:57
字体:
来源:转载
供稿:网友

表单是做网页中很常使用到的元素,但预设的样式都是丑丑的,笔者今天要教各位快速做出自订的单/多选框样式,让您的表单硬是要跟别人不一样。
2016517113412675.png (452×150)

基本 HTML 就是一个单选框元素加上标签元素:

XML/HTML Code复制内容到剪贴板
  1. <body>    <h3>性别(单选)</h3>  
  2.  <div class="abgne-menu-20140101-1">        <input type="radio" id="male" name="sex">  
  3.      <label for="male">男性</label>       
  4.      <input type="radio" id="female" name="sex">        <label for="female">女性</label>  
  5.           <input type="radio" id="other" name="sex">  
  6.      <label for="other">其它</label>    </div>  
  7. </body>  

每一个标签元素中特过 for 属性来跟单选框元素一一配对,当点击到标签元素时,则同时会触发点击到相对应的单选框。而我们不想要丑丑的单选框元素,所以笔者先用 CSS 将它隐藏起来。

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1 input[type="radio"] {     display: none;   
  2. }  

隐藏好之后,接下来就是将标签元素进行改造一下:

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1 input[type="radio"] + label {     display: inline-block;   
  2.  background-color: #ccc;     cursor: pointer;   
  3.  padding: 5px 10px;    }  

笔者只是做一些很简单的样式设计,同时加上自订鼠标游标为 pointer,让使用者知道它是可以点击的。

而比较特别的是 + 这个符号,它是相邻兄弟选择器(Adjacent Sibling Selector)。范例中要找的标签元素是得要跟在单选框元素后的才行,若是改成 #male + label 的话:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表