单选、复选样式美化的图文详解-css教程-PHP中文网

首页

web前端

css教程

单选、复选样式美化的图文详解

php中世界最好的语言

Mar 22, 2018 pm 01:10 PM

图文样式美化

这次给大家带来单选、复选样式美化的图文详解，单选、复选样式美化的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

相信大家都知道在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单，本文中实现的效果非常不错，感兴趣的朋友们下面来一起学习学习。

效果图如下

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选单选样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*复选框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }
    /*单选框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
    }
    .redio-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;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>复选框：</h2>
<form action="#">
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </p>
    <label for="usename">体育</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </p>
    <label for="usepwd">音乐</label>
  </p>
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </p>
    <label for="checkbox3">读书</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </p>
    <label for="checkbox4">运动</label>
  </p>
</form> 
<h2>单选框</h2>
<form action="#">
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </p>
    <label for="boy">男</label>
  </p>
  
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </p>
    <label for="girl">女</label>
  </p>
</form> 
</body>
</html>

注意：

+ 是css的相邻选择符。

关系选择符只有四种,是空格 > + ~ （包含选择符、子选择符、相邻选择符、兄弟选择符）

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS实现一级导航栏

linear-gradient的使用详解

CSS与HTML常见的使用误区

以上是单选、复选样式美化的图文详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

macOS：如何更改桌面小部件的颜色Oct 07, 2023 am 08:17 AM

在macOSSonoma中，小部件不必隐藏在屏幕外，也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反，它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时，macOS桌面小部件会采用单色样式淡入背景，从而减少干扰，并允许您专注于活动应用程序或窗口中手头的任务。但是，当您单击桌面时，它们将恢复为全彩色。如果您更喜欢单调的外观，并且希望在桌面上保留这一方面的统一性，那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

WordPress网页错位现象解决攻略Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开

CSS网页背景图设计：创建各种背景图样式和效果Nov 18, 2023 am 08:38 AM

CSS网页背景图设计：创建各种背景图样式和效果，需要具体代码示例摘要：在网页设计中，背景图是一种重要的视觉元素，它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果，并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果，以达到更好的视觉效果和用户体验。关键词：CSS，背景图，设计样式，效果，代码示

利用ThinkPHP6实现漂亮的404页面Jun 20, 2023 am 11:06 AM

随着互联网的日益发展，许多网站或应用也逐渐变得复杂。当用户在使用时，时常会遇到错误页面，其中最常见的就是404页面。404页面指访问的页面不存在，是常见的错误页面。而对于网站或应用来说，一个漂亮的404页面能极大提升用户体验。在本文中，我们将会介绍如何利用ThinkPHP6快速实现一个漂亮的404页面。创建路由首先，我们需要在route文件夹中创建一个err

使用Java 13中的新的JavaFX CSS样式表来美化用户界面Jul 30, 2023 pm 02:49 PM

使用Java13中的新的JavaFXCSS样式表来美化用户界面引言：在软件开发中，用户界面的美观和易用性对于提升用户体验至关重要。JavaFX是Java平台上一种现代的、富有表现力的界面技术，它提供了丰富的UI组件和功能。为了让用户界面更加美观，JavaFX提供了CSS样式表来进行界面的美化和定制。在Java13中，JavaFX引入了新的CSS样式表，

word美化怎么做Mar 19, 2024 pm 08:31 PM

我们在进行word文档编辑处理的时候，总是希望能够使得文档更加漂亮、美观，但是，一说到word美化，很多人想到的就是将字体、颜色做得个性一点，将边距和行距进行调整等等，其实我们可以通过更多的操作，是word更加美观，比如我们可以通过插入图片，修饰边框等让word文档更好看。下面我们就试试利用边框花纹让word文档更美观，一起来学一学吧！首先，打开一个新的Word文档，然后在【开始】选项卡下找到【段落】工具。接着，点击【边框】选项，如图示的红色箭头所指示的那样。2、我们点击之后系统会自动弹出下拉选

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式Nov 20, 2023 am 11:22 AM

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式，需要具体代码示例在CSS中，伪类选择器是一种非常强大的工具，可以用来选择文档树中特定的元素。其中之一就是:nth-last-child(2)伪类选择器，它可以选择倒数第二个子元素并对其应用样式。首先，让我们来创建一个示例HTML文档，以便我们可以在其中使用这个伪类选择器。以

百家号图文收益规则是什么？做图文赚钱吗？Mar 24, 2024 am 09:41 AM

作为百度旗下的自媒体平台，百家号为众多创作者提供了一个展示才华、分享知识的平台。对于这些自媒体创作者来说，图文收益规则无疑是一个备受关注的议题。一、百家号图文收益规则是什么？百家号图文收益规则主要分为三个部分：流量奖励机制、广告收益分成以及付费订阅收益。流量奖励机制是指根据原创内容的质量、阅读量和传播效果进行评估，并根据评估结果给予相应的奖励。这意味着如果你的文章质量高、阅读量多、传播广，你将有机会获得更多的奖励。广告收益分成是指在自己的内容中插入广告链接或进行合作推广，在用户点击广告后获取一定

See all articles