2. 程式人生 > >自定義單選框樣式方法

自定義單選框樣式方法

阿新 • • 發佈：2018-12-16

元素的初始樣式都不怎麼好看，我們一般修改樣式會想到直接在那元素上新增樣式，比如background、border等，在大多數元素上是可以這麼做，但當遇上了單選框會毫無反應。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style無法直接修改單選框樣式</title>
    <style>
        .radio{
            width: 100px;
            height
 
: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="radio" class="radio"/>
</body>
</html>

在這裡插入圖片描述

怎麼解決呢？

使用label進行偽元素（或一些標籤，比如i，em，span等）和input繫結，隱藏單選框，顯示偽元素，且使用css選擇器:checked進行點選後偽元素（或繫結標籤）內容（或樣式）的修改。

以下例子只是修改偽元素的內容。

<!DOCTYPE html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改單選框樣式</title>
    <style>
        /*.radio{*/
        /*width: 100px;*/
        /*height: 100px;*/
        /*background-color: red;*/
        /*}*/
        .radio {
            display: none;
        }
		/* +代表相鄰的元素 */
 

        .radio + i {
            font-style: normal;
            text-align: center;
            font-size: 16px;
        }
		/* ::after偽元素，使用偽元素，必須含有content屬性，可以為'',但不可不寫 */
        .radio + i::after {
            content: '☆';
        }
		/* 點選後偽元素內容變化 */
        .radio:checked + i::after {
            content: '★';
        }
    </style>
</head>
<body>
<label>
    <input type="radio" class="radio" name="aa" id="aa"/>
    <i></i>
    aa
</label>
<label>
    <input type="radio" class="radio" name="aa" id="bb"/>
    <i></i>
    bb
</label>
</body>
</html>

完成後的結果： 在這裡插入圖片描述 在這裡插入圖片描述

相關推薦

自定義單選框樣式方法

元素的初始樣式都不怎麼好看，我們一般修改樣式會想到直接在那元素上新增樣式，比如background、border等，在大多數元素上是可以這麼做，但當遇上了單選框會毫無反應。 例： <!DOCTYPE html> <html lang="en"&

自定義單選框樣式

大多數情況下我們需要重新定義單選框的樣式，比如下圖：html程式碼如下：<div class="user-info-detail">     <p>         <span class="item-name">性別</span&g

小程序 中 自定義單選框樣式

eid function bind ems city his try ava html <radio-group name="country" class="radio-group" bindchange="radioChange"> <l

自定義單選框，復選框樣式

round absolut ima tex utf-8 play col 樣式 bsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

jq點選lable自定義單選框變換樣式並且選中input

<style> input[type='radio'] { display: none; } .ui-zidingyi {     width: 20px;     height: 20px;     display: inline-block;     

CSS學習筆記三：自定義單選框，復選框，開關

sla checked 移動 transform 第一個 16px 位移 block back 一點一點學習CCS，這次學習了如何自定義單選框，復選框以及開關。 一、單選框 1、先寫好body裏面的樣式，先寫幾個框 1 <body> 2 <d

自定義單選框選中

blog rem scl script ext class 代碼 pan pos jq代碼 <script type="text/javascript"> $(function(){ $(".J_check").on(‘

自定義單選框和多選框

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

WPF 自定義單選框CheckBox邊框的大小，利用Viewbox讓鉤隨邊框大小而自動伸縮功能，利用IsChecked選中後可是打鉤。

原始碼 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">         <Setter Property="SnapsToDevicePixels" Value="

WPF 自定義單選框CheckBox邊框的大小，設定打鉤隨邊框大小而自動伸縮功能，利用IsChecked選中後可是打鉤。

原始碼 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> <Setter Property="SnapsToDevicePixels" Value="true" /&g

5分鐘DIY一個自定義單選框單選按鈕

轉眼間2017年了，在這裡祝大家2017都能 展翅高飛、心想事成！ 上次寫博已經是兩個月前了，這兩個月七搞八搞學了不少黑科技日後必會分享給大家~下面咱們就開門見山了 由於瀏覽器本身自帶的單選按鈕且不說好看不好看，各大瀏覽器廠商也是一人一個樣兒想要統一效果

bootstrap-table自定義複選框樣式

在使用bootstrap-table外掛時發現上面的複選框還是原生樣式比較醜 修改後的樣式 直接上程式碼 需引入樣式 .bella-checkbox{ position: relative; } /** 將初始的checkbox的樣式改變 */ .be

關於jsp頁面checkbox複選框的預設樣式的修改(自定義複選框樣式)

checkbox複選框的預設樣式太low，最近做的專案我選擇了自定義樣式，網上找了不少文章內容冗餘，並且並不是都有效果，所以將自己過程整理出來，以備後用。只要在jsp頁面和css樣式表中新增相應程式碼即可：一、jsp頁面：<div class="container"&g

react-native自定義單選框元件

http://www.jianshu.com/p/285a99686606 下載： npm i react-native-radio-master --save  使用： import RadioModal from 'react-native-radio-m

js自定義修改復選框單選框樣式，清除復選框單選框默認樣式

radio 技術分享 b2c 如果 watermark css 狀態 初始化 -a 之前做項目的時候，也遇到過需要按照設計稿把<input type="checkbox">和<input type="radio">的默認樣式進行修改，但發現，並沒有可

ionic3自定義單選

sel images ges ima blog scrip ionic cli item import { Component } from [email protected]/* *//core‘; import { NavController } fro

自定義下拉框樣式，利用prototype制作

制作 pointer code javascrip .text att .com 自定義 cti <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

input radio單選框樣式優化

HTML程式碼： <form> <div> <input id="item1" type="radio" name="item" value="水果" checked> <label for="item

CSS自定義select選擇框樣式（右側下拉箭頭）

如圖：自定義select的箭頭樣式  HTML以及CSS程式碼如下： <select class="form_select"> <option value="0">請選擇</option> <option value=

微信小程式 自定義單選複選按鈕組的實現(用於實現購物車產品列表功能)

  （一）單選按鈕組 模型圖如下：  index.js Page({ data: { parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商