CSS 實現自定義樣式的單選框與多選框

阿新 • • 發佈：2019-01-15

前端在開發的過程中，經常會遇見使用單選框以及多選框的情況，但是預設的選框按鈕的樣式單一，一般我們需要去自定義一些選框按鈕的樣式；

通常情況下，單選、多選為方便自定義樣式，一般會採用input+label去實現，這裡實現的原理主要是運用了label標籤的for屬性；

for 屬性規定 label 與哪個表單元素繫結。

1. 單選框
這裡寫圖片描述

實現方式：input type=radio + label
HTML：

<body>
    <div class="box">
        <input type="radio"  id="radio1" 
  name="radio"  checked="checked"/><label for="radio1">選項一</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio2"  name="radio"/><label for="radio2">選項二</label>
    </div>
    <div class 
="line"></div>
    <div class="box">
        <input type="radio"  id="radio3"  name="radio"/><label for="radio3">選項三</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio4"  name="radio"/><label for 
="radio4">選項四</label>
    </div>
    <div class="line"></div>
    <div class="box">
        <input type="radio"  id="radio5"  name="radio"/><label for="radio5">選項五</label>
    </div>
    <div class="line"></div>
</body>

CSS:

<style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                border: none;
                box-sizing: border-box;
                outline: none;
            }
            .box{
                width: 100%;
                height: 50px;
                text-align: center;
            }

            input{
                display: none;
            }

            label{
                width: 100%;
                height: 100%;
                display: inline-block;
                position: relative;
                line-height: 50px;
                color: #999;
            }
            label:active{
                background: #EEEEEE;
            }
            label:after{
                content: "";/*必須設定*/
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 1px solid green;
                position: absolute;
                top: 15px;
                left: 15px;
                border-radius: 20px;
            }

            input:checked+label:after{
                background-color: green;
            }

            .line{
                width: 100%;
                height: 1px;
                background: #ccc;
                opacity: 0.2;
            }
        </style>

2. 多選框
這裡寫圖片描述

實現方式：input type=checkbox + label

HTML:

<body>
        <div class="box">
            <input type="checkbox"  id="checkbox1"/><label for="checkbox1">選項一</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox2"/><label for="checkbox2">選項二</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox3"/><label for="checkbox3">選項三</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox4"/><label for="checkbox4">選項四</label>
        </div>
        <div class="line"></div>
        <div class="box">
            <input type="checkbox"  id="checkbox5"/><label for="checkbox5">選項五</label>
        </div>
        <div class="line"></div>
    </body>

css:

    <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                border: none;
                box-sizing: border-box;
                outline: none;
            }
            .box{
                width: 100%;
                height: 50px;
            }
            input{
                display: none;
            }
            label{
                width: 100%;
                height: 50px;
                display: inline-block;
                line-height: 50px;
                position: relative;
                text-align: center;
            }
            label:active{
                background: #EEEEEE;
            }
            label:after{
                content: "";
                width: 20px;
                height: 20px;
                border: 1px solid green;
                border-radius: 20px;
                display: inline-block;
                position: absolute;
                top: 15px;
                left: 15px;
            }
            input:checked+label:after{
                background-color: green;
            }

            .line{
                width: 100%;
                height: 1px;
                background: #CCCCCC;
                opacity: 0.3;
            }
    </style>

CSS 實現自定義樣式的單選框與多選框

前端在開發的過程中，經常會遇見使用單選框以及多選框的情況，但是預設的選框按鈕的樣式單一，一般我們需要去自定義一些選框按鈕的樣式；通常情況下，單選、多選為方便自定義樣式，一般會採用input+

dialog裡面實現自定義樣式單選按鈕功

先放效果圖：步驟： 1、建立一個繼承dialog的類 public class OutCallDialog extends Dialog implements android.view.View.OnClickListener { private RadioGro

jQuery實現自定義樣式的彈出視窗和確認框

(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btn

【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框

Html程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

input CSS 自定義樣式單選框/多選框

備忘，直接上程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>樣式</title

CSS實現自定義導航欄帶二級選單

程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

DedeCMS實現自定義表單提交後傳送指定郵箱的方法

連結: https://pan.baidu.com/s/1t7F8eah3Bw-97jsKNqiQQg 提取碼: gs6j 一、登陸QQ郵箱——設定——賬戶，找到POP3/IMAP/SMTP，開啟，現在的郵箱開啟POP3/SMTP都要授權碼，記下你的授權碼，等一下是作為密碼使用的

html+css實現自定義圖片上傳按鈕

普通的input[type=‘file’]的效果很樸素可以自定義一個file選擇檔案的按鈕：思路為：用定位將自定義的按鈕遮住原來的選擇檔案按鈕，再讓點選自定義按鈕時觸發原來的選擇檔案按鈕的事件即可（對此，label可實現） eg: html: css樣式：結果圖：

基於ckeditor實現自定義表單

最近公司的一個系統需要自定義表單，根據以往使用ckeditor的經驗突發奇想，用ckeditor編寫外掛的方式實現了一個自定義表單系統。下面簡單介紹一下表單設計器的設計思路。表單設計器原理表單智慧設計器的設計思想是基於ckeditor富文字編輯器，開發HTML表單中需要

jquery+css實現自定義對話方塊功能（不使用外掛）

當今網路上各種jquery對話方塊外掛層出不窮，可是我為什麼要放棄這些外掛選擇自己使用jquery和css來自定義對話方塊的呢？有兩方面的原因，一個是有利於自己更加深入的瞭解css和jquery的特性，另一方面也可以更加的相容自己的專案。這裡面有幾個關鍵性的技術點，但是我們

工作流實現自定義表單

定義概述：一個已經做好的表單需要繫結到節點上。自定義表單工作模式：流程控制按鈕區域是ccflow來完成，表單區域是放在控制區域下面的框架裡。注意:藍色邊框一下是一個框架，框架裡面的介面是一個url，這個就是自定義表單。應用背景：這種型別是解決我自己已經有了一個成

使用DEDECMS織夢自帶的郵件功能實現自定義表單郵件通知

用DEDECMS（織夢）做開發的時，有些客戶可能要求自定義表單提交後向指定郵箱傳送郵件通知這樣的功能。我搜索了一下，網上的程式碼基本都是一樣的，就是使用 PHPMailer 來實現。但其實DEDE本身就已經帶有了郵件功能，為什麼我們還要藉助 PHPMailer 來實現呢？今

通過純JS和css實現自定義彈出對話方塊

需求：實現通過一個彈出對話方塊來選擇下拉列表中對應值進行引數設定操作，及彈出對話方塊中需要有一個下拉列表輸入和一個確定按鈕即可，要求彈出對話方塊後，背部介面不能夠操作或者被遮蔽灰掉。思路： 1.開始以為so so much simple，毫不猶豫考慮prompt彈出對話

自定義UITableView實現自定義左滑刪除按鈕及多按鈕，拖拽cell和表頭進行排序

本文介紹了能拖拽cell和表頭進行排序的自定義UITableView,並且能自定義左滑顯示的UIButton樣式。先看左滑自定義按鈕效果圖： override func tableView(_ tableView: UITableView, editA

C# 實現自定義的USB設備與上位機進行通信（上位機部分）

lob filename 參考 EDA 文件 inpu sha red file 　　因為以前沒用過USB，對USB也不了解，於是上網查了很多資料，不過網上的資料都是零零散散，不清不楚的，於是我自己總結了一下，下面幾個鏈接是網上這麽多零散資料裏，我覺得比較有參考意義的。　

最簡單清晰的純css實現的單選框radio複選框checkbox自定義樣式

<fieldset> <legend style="color: red;">自定義單選框radio</legend> <div cla

支援ie8單選框與複選框自定義樣式

css 樣式 /*wrapper divs 複選框與單選框樣式 */ .custom-checkbox,.custom-radio{position:relative;} /* input, label positioning 該樣式控制checkbox */.custo

對復選框自定義樣式優化方法

lock 優化 title IE 得到 nbsp 組合 box alt 對復選框自定義樣式，我們以前一直用的腳本來實現，不過現在可以使用新的偽類 :checkbox 來實現。如果直接對復選框設置樣式，那麽這個偽類並不實用，因為沒有多少樣式能夠對復選框起作用。不過，倒是可

自定義radio單選框

<input type="radio" name="isSponsor" class="activity-radio"> <input type="radio" name="isSponsor" class="activity-radio"> .activity-radi

自定義單選框和多選框

說明:作為一個Java後端程式設計師，有時候也需要自己去寫些前端程式碼，所以將工作中用到的一些小知識做記錄分享。 1.自定義單選框（有圖片） * ①先看效果圖： * ②再獻上完整程式碼： <!DOCTYPE html> <html> &l

CSS 實現自定義樣式的單選框與多選框

相關推薦