首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

通过bootstrap创建好看的单选框复选框

作者：姿萱俊达俊宏 | 来源：互联网 | 2023-09-03 17:04
第一步：自定义单选框、复选框的层叠样式表，并将其映入build.css:.checkbox{padding-left:20px;}.checkboxlabel

 

第一步：自定义单选框、复选框的层叠样式表，并将其映入

build.css:

.checkbox {
  padding-left: 20px; }
.checkbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px; }
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555; }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  opacity: 0;
  z-index: 1; }
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #555555;
  border-radius: 2px;
  margin-left: -16.5px;
  margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
      opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
        cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
    border-radius: 50%; }
.checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: #337ab7;
  border-color: #337ab7; }
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de; }
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
  color: #fff;}

.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
  background-color: #337ab7;
  border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
  background-color: #fff;
}

.radio {
  padding-left: 20px; }
.radio label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
    padding-left: 5px; }
.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #555555;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
  opacity: 0;
    z-index: 1; }
.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
      transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
.radio.radio-inline {
    margin-top: 0; }

.radio-primary input[type="radio"] + label::after {
  background-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #337ab7; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
  font-family: \'FontAwesome\';
  content: "\f00c"; }
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
  color: #fff; }
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
  color: #fff; }

第二步：引入相关头文件

第三步：使用案例：


<div class="checkbox">
    <input type="checkbox" name="item[1]" id="item1" value=""/>
    <label for="item1">选项一label>
div>
<div class="checkbox checkbox-success">
    <input type="checkbox" name="item[2]" id="item2" value="" checked="checked" />
    <label for="item2">选项二label>
div>
<div class="checkbox checkbox-info">
    <input type="checkbox" name="item[3]" id="item3" value="" checked="checked"/>
    <label for="item3">选项三label>
div>


<div class="radio">
    <input type="radio" name="radio" id="radio1" value="" />
    <label for="radio1">ITEM 1label>
div>
<div class="radio radio-success">
    <input type="radio" name="radio" id="radio2" value="" checked="checked" />
    <label for="radio2">ITEM 2label>
div>

第四步：代码整合，（注：build.css与该HTML在同一目录下）

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content=">
        <title>创建一个好看的 CheckBoxtitle>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js">script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
        <link rel="stylesheet" type="text/css" href="build.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"/>
    head>
    <body>
        
        <div class="checkbox">
            <input type="checkbox" name="item[1]" id="item1" value=""/>
            <label for="item1">选项一label>
        div>
        <div class="checkbox checkbox-success">
            <input type="checkbox" name="item[1]" id="item2" value="" checked="checked" />
            <label for="item2">选项二label>
        div>
        <div class="checkbox checkbox-info">
            <input type="checkbox" name="item[1]" id="item3" value="" checked="checked"/>
            <label for="item3">选项三label>
        div>
        
        
        <div class="radio">
            <input type="radio" name="radio" id="radio1" value="" />
            <label for="radio1">ITEM 1label>
        div>
        <div class="radio radio-success">
            <input type="radio" name="radio" id="radio2" value="" checked="checked" />
            <label for="radio2">ITEM 2label>
        div>
        
    body>
html>

参考资料


推荐阅读
  • php

    网站访问全流程解析

    网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • get

    深入解析：React与Webpack配置进阶指南（第二部分）

    深入解析：React与Webpack配置进阶指南（第二部分）
    在本篇进阶指南的第二部分中，我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例，我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序，具体包括 `TodoApp.js` 文件中的代码实现，如导入 React 和自定义组件 `TodoList`。此外，我们还将深入讲解 Webpack 配置文件的优化方法，以提升开发效率和应用性能。 ... [详细]
  • select

    Ext JS MVC系列一：环境搭建与框架概览

    Ext JS MVC系列一：环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架，并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • bash

    CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解

    CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中，iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表，包括编写脚本文件 `/usr/local/sbin/iptables.sh`，并使用 `iptables -F` 清空现有规则。此外，还深入探讨了 NAT 表的配置方法，帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • get

    利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

    本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • php

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • ip

    优化Vite 1.0至2.0升级过程中遇到的某些代码块过大问题解决方案

    优化Vite 1.0至2.0升级过程中遇到的某些代码块过大问题解决方案
    本文详细探讨了在将项目从 Vite 1.0 升级到 2.0 的过程中，如何解决某些代码块过大的问题。通过具体的编码示例，文章提供了全面的解决方案，帮助开发者有效优化打包性能。 ... [详细]
  • go

    深入解析浏览器内核与版本的发展历程

    浏览器作为我们日常不可或缺的软件工具，其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程，帮助读者更好地理解这一关键技术组件，揭示其内部运作的奥秘。 ... [详细]
  • go

    Android TextView：实现多彩文字与多样化字体效果

    在探讨如何在Android的TextView中实现多彩文字与多样化字体效果时，本文提供了一种不依赖HTML技术的解决方案。通过使用SpannableString和相关的Span类，开发者可以轻松地为文本添加丰富的样式和颜色，从而提升用户体验。文章详细介绍了实现过程中的关键步骤和技术细节，帮助开发者快速掌握这一技巧。 ... [详细]
  • php

    Unity3D 中 AsyncOperation 实现异步场景加载及进度显示优化技巧

    Unity3D 中 AsyncOperation 实现异步场景加载及进度显示优化技巧
    在Unity3D中，通过使用`AsyncOperation`可以实现高效的异步场景加载，并结合进度条显示来提升用户体验。本文详细介绍了如何利用`AsyncOperation`进行异步加载，并提供了优化技巧，包括进度条的动态更新和加载过程中的性能优化方法。此外，还探讨了如何处理加载过程中可能出现的异常情况，确保加载过程的稳定性和可靠性。 ... [详细]
  • php

    深入浅出 webpack 系列（二）：实现 PostCSS 代码的编译与优化

    深入浅出 webpack 系列（二）：实现 PostCSS 代码的编译与优化
    在前一篇文章中，我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化，包括配置相关插件和加载器，以提升开发效率和代码质量。我们将详细介绍每个步骤，并提供实用示例，帮助读者更好地理解和应用这些技术。 ... [详细]
  • ip

    基于 Vue 和 Element UI 实现的简洁登录界面设计

    基于 Vue 和 Element UI 实现的简洁登录界面设计
    本文介绍了一种利用 Vue.js 和 Element UI 框架构建的简洁登录界面设计。该设计不仅注重用户体验，还确保了界面的美观性和易用性。通过合理的布局和组件配置，实现了高效、响应式的登录功能，适用于多种前端应用场景。 ... [详细]
  • go

    Vue 页面状态管理与跨页面数据传递的有效策略

    在 Vue 应用开发中，页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式，帮助开发者高效地实现页面间的数据交互与状态同步，同时分享一些最佳实践和注意事项。 ... [详细]
  • php

    ButterKnife的基础应用与实践指南

    ButterKnife 是一款用于 Android 开发的注解库，主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法，包括如何通过注解实现字段和方法的绑定，以及在实际项目中的应用示例。此外，文章还提到了截至 2016 年 4 月 29 日，ButterKnife 的最新版本为 8.0.1，为开发者提供了最新的功能和性能优化。 ... [详细]
  • get

    探究HTML5应用中的三种Accordion交互效果

    在HTML5应用中，Accordion（手风琴，又称抽屉）效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果，通过层次结构优化信息展示和页面布局，提升用户体验。这些效果不仅增强了视觉效果，还提高了内容的可访问性和互动性。 ... [详细]
author-avatar
姿萱俊达俊宏
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有