应用CSS3清理HTML表单的技能演试

日期：2020-12-12 类型：科技新闻 

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

表单是做网页页面中很常应用到的元素，但预设的款式全是丑丑的，笔者今日要教各位迅速做出自订的单/多选框款式，让您的表单硬是要跟他人不1样。

基础 HTML 便是1个单选框元素再加标识元素：

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <h3>性別(单选)</h3>  
  3.  <div class="abgne-menu⑵0140101⑴">  
  4.      <input type="radio" id="male" name="sex">  
  5.      <label for="male">男性</label>  
  6.     
  7.      <input type="radio" id="female" name="sex">  
  8.      <label for="female">女士</label>  
  9.     
  10.      <input type="radio" id="other" name="sex">  
  11.      <label for="other">其它</label>  
  12.  </div>  
  13. </body>  

每个标识元素中特过 for 特性来跟单选框元素11匹配，当点一下到标识元素时，则另外会开启点一下到相对性应的单选框。而大家不要想丑丑的单选框元素，因此笔者先用 CSS 将它掩藏起来。

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140101⑴ input[type="radio"] {   
  2.  display: none;   
  3. }  

掩藏好以后，接下来便是将标识元素开展更新改造1下：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140101⑴ input[type="radio"] + label {   
  2.  display: inline-block;   
  3.  background-color: #ccc;   
  4.  cursor: pointer;   
  5.  padding: 5px 10px;   
  6. }  

笔者只是做1些很简易的款式设计方案，另外再加自订电脑鼠标游标为 pointer，让应用者了解它是能够点一下的。

而较为非常的是 + 这个标记，它是邻近弟兄挑选器(Adjacent Sibling Selector)。案例中要找的标识元素是得要跟在单选框元素后的才行，若是改为 #male + label 的话：

就真的仅有在 #male 后的下1个标识元素才会合理果，其它更后边的弟兄元素则是不容易有反映的唷。

好啦~如今若没难题的话，就会看到基础的款式出来了：

最终要是再配搭 :checked 拟种别(Pseudo-classes)就可以收工下班啦！

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140101⑴ input[type="radio"]:checked + label {   
  2.  background-color: #f00;   
  3.  color: #fff;   
  4. }  

这边是对于被点选到的单选框元素后的下1个标识元素开展设置。全部进行后的款式就变为了：

而多选框的自订方法还可以依此类推来设置。

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <h3>特长(多选)</h3>  
  3.  <div class="abgne-menu⑵0140101⑵">  
  4.      <input type="checkbox" id="jquery" name="skill" checked>  
  5.      <label for="jquery">jQuery</label>  
  6.     
  7.      <input type="checkbox" id="css3" name="skill">  
  8.      <label for="css3">CSS3</label>  
  9.     
  10.      <input type="checkbox" id="html5" name="skill">  
  11.      <label for="html5">HTML5</label>  
  12.     
  13.      <input type="checkbox" id="angularjs" name="skill">  
  14.      <label for="angularjs">AngularJS</label>  
  15.  </div>  
  16. </body>  

CSS 的部分要是将 input[type="radio"] 改为 input["checkbox"] 便可以了

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140101⑵ input[type="checkbox"] {   
  2.  display: none;   
  3. }   
  4. .abgne-menu⑵0140101⑵ input[type="checkbox"] + label {   
  5.  display: inline-block;   
  6.  background-color: #ccc;   
  7.  cursor: pointer;   
  8.  padding: 5px 10px;   
  9. }   
  10. .abgne-menu⑵0140101⑵ input[type="checkbox"]:checked + label {   
  11.  background-color: #f3d42e;   
  12. }  

是否很简易呢~

下面则是要教大伙儿怎样平白无故造成出单/多选框的元素囉。

1样是1个 radio 元素加1个专属的 label 元素：

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <h3>性別(单选)</h3>  
  3.  <ul class="abgne-menu⑵0140109⑴">  
  4.   <li>  
  5.    <input type="radio" id="male" name="sex">  
  6.       <label for="male">我是男孩子</label>  
  7.   </li>  
  8.   <li>  
  9.    <input type="radio" id="female" name="sex">  
  10.       <label for="female">我是女生</label>  
  11.   </li>  
  12.   <li>  
  13.    <input type="radio" id="other" name="sex">  
  14.       <label for="other">我不想说</label>  
  15.   </li>  
  16.  </ul>  
  17. </body>  

优秀行基础的款式设计方案：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140109⑴, .abgne-menu⑵0140109⑴ li {   
  2.  list-style: none;   
  3.  margin: 5px 0;   
  4.  padding: 0;   
  5. }   
  6. .abgne-menu⑵0140109⑴ label {   
  7.  cursor: pointer;   
  8.  display: block;   
  9.  width: 120px;   
  10.  position: relative;   
  11.  line-height: 31px;   
  12. }   
  13. .abgne-menu⑵0140109⑴ input[type="radio"] {   
  14.  display: none;   
  15. }  

这些部分在用 CSS3 做表单 - 自定单/多选框款式(1)中应当都有学过吧，就只是先把 radio 元素掩藏起来。

接着，笔者要应用 ::after 拟元素(Pseudo-elements)在 lable 元素中造成用来替代单选框款式的元素：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140109⑴ label::after {   
  2.  content: "No";   
  3.  display: inline-block;   
  4.  width: 25px;   
  5.  height: 25px;   
  6.  line-height: 25px;   
  7.  border-radius: 50%;   
  8.  padding: 3px;   
  9.  color: #FFF;   
  10.  background: #f00;   
  11.  text-align: center;   
  12.  margin-left: 10px; /* 跟文本造成间距 */  
  13. }  

拟元素的內容是透过 content 特性来特定的，且1样能用 CSS 来设备它。

细心看1下 DevTools 的画面：

尽管是叫 after，但实际上是将元素造成并置放在 label 元素中，因此点一下到该元素也等同于点一下到 label 元素。最终快来补上当受骗 radio:checked 时的转变囉：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140109⑴ input[type="radio"]:checked + label::after {   
  2.  content: "Yes";   
  3.  background: green;   
  4. }  

假如要想改放在正前方时，就更换成应用 ::before：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140109⑴ label {   
  2.  cursor: pointer;   
  3.  display: block;   
  4.  width: 120px;   
  5.  position: relative;   
  6.  line-height: 31px;   
  7.  padding-left: 40px; /* 再加间距 */  
  8. }   
  9. .abgne-menu⑵0140109⑴ label::before {   
  10.  content: "No";   
  11.  display: inline-block;   
  12.  width: 25px;   
  13.  height: 25px;   
  14.  line-height: 25px;   
  15.  border-radius: 50%;   
  16.  padding: 3px;   
  17.  color: #FFF;   
  18.  background: #f00;   
  19.  text-align: center;   
  20.  position: absolute;   
  21.  left: 0;   
  22. }   
  23. .abgne-menu⑵0140109⑴ input[type="radio"]:checked + label::before {   
  24.  content: "Yes";   
  25.  background: green;   
  26. }  

在其中 lable 元素的 padding-left 是以便跟拟元素造成间距以防靠的太近太挤~

多选框的做法也是1样，只是将 radio 改为 checkbox 便可以了：

CSS Code拷贝內容到剪贴板
  1. .abgne-menu⑵0140109⑵, .abgne-menu⑵0140109⑵ li {   
  2.  list-style: none;   
  3.  margin: 5px 0;   
  4.  padding: 0;   
  5. }   
  6. .abgne-menu⑵0140109⑵ label {   
  7.  cursor: pointer;   
  8.  display: block;   
  9.  width: 120px;   
  10.  position: relative;   
  11.  line-height: 31px;   
  12. }   
  13. .abgne-menu⑵0140109⑵ label::after {   
  14.  content: "No";   
  15.  display: inline-block;   
  16.  width: 25px;   
  17.  height: 25px;   
  18.  line-height: 25px;   
  19.  border-radius: 50%;   
  20.  padding: 3px;   
  21.  color: #FFF;   
  22.  background: #f00;   
  23.  text-align: center;   
  24.  position: absolute;   
  25.  rightright: 0;   
  26. }   
  27. .abgne-menu⑵0140109⑵ input[type="checkbox"] {   
  28.  display: none;   
  29. }   
  30. .abgne-menu⑵0140109⑵ input[type="checkbox"]:checked + label::after {   
  31.  content: "Yes";   
  32.  background: green;   
  33. }  

有木有感觉 CSS3 真的是很强劲咧~

上一篇：css3 transform及原生态js完成电脑鼠标拖拽三d立方体 返回下一篇：CSS中国银行高line