2. 程式人生 > >自定義單選框，復選框樣式

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

阿新 • • 發佈：2017-12-06
round absolut ima tex utf-8 play col 樣式 bsp 

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>
        <style type="text/css">
            div{
                height: 50px;
                position: relative;
            }
            .rdo {
                width
 
: 30px;
                height: 0px;
                background-color: #000;
                margin-right: 30px;
                border-radius: 50%;
                position: relative;
            }
            .rdo:before,.rdo:after {
                content: ‘‘;
                display: block;
                position
 
: absolute;
                border-radius: 50%;
                transition: .3s ease;
                cursor: pointer;
            }
            .rdo:before {
                top: 0px;
                left: 0px;
                width: 18px;
                height: 18px;
                background-color
 
: #fff;
                border: 1px solid #000;
            }
            .rdo:after {
                top: 6px;
                left: 6px;
                width: 8px;
                height: 8px;
                background-color: #fff;
            }
            .rdo:checked:after {
                top: 4px;
                left: 4px;
                width: 12px;
                height: 12px;
                background-color:#ea879a;
            }
            .rdo:checked:before {
                border-color:#ea879a;
            }
            label[for="q1"]{
                position: absolute;
                top: 15px;
                left: 35px;
                width: 8px;
                height: 8px;
                cursor: pointer;
            }
            label[for="q2"]{
                position: absolute;
                top: 15px;
                left: 104px;
                width: 8px;
                height: 8px;
                cursor: pointer;
            }
            .cb {
                width: 30px;
                height: 0px;
                background-color: #000;
                margin-right: 30px;
                position: relative;
            }
            .cb:before,.cb:after {
                content: ‘‘;
                display: block;
                position: absolute;
                transition: .3s ease;
                cursor: pointer;
            }
            .cb:before {
                top: 0px;
                left: 0px;
                width: 18px;
                height: 18px;
                background-color: #fff;
                border: 1px solid #000;
            }
            .cb:after {
                top: 6px;
                left: 6px;
                width: 8px;
                height: 8px;
                background-color: #fff;
            }
            .cb:checked:after {
                top: 4px;
                left: 4px;
                width: 12px;
                height: 12px;
                background-color:#ea879a;
            }
            .cb:checked:before {
                border-color:#ea879a;
            }
            label[for="q3"]{
                position: absolute;
                top: 15px;
                left: 35px;
                width: 8px;
                height: 8px;
                cursor: pointer;
            }
            label[for="q4"]{
                position: absolute;
                top: 15px;
                left: 104px;
                width: 8px;
                height: 8px;
                cursor: pointer;
            }
        </style>
    </head>  
    <body>
        <div>
            <label for="q1">男</label><input type="radio" class="rdo" id="q1" name="sex" checked>
            <label for="q2">女</label><input type="radio" class="rdo" id="q2" name="sex">
        </div>
        <div>
            <label for="q3">男</label><input type="checkbox" class="cb" id="q3" name="sex" checked>
            <label for="q4">女</label><input type="checkbox" class="cb" id="q4" name="sex">
        </div>

    </body>  
</html>

技術分享圖片

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

相關推薦

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

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

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

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

單選框，復選框

單選 一個 div bsp style checked 學習java inpu radi 1、分組即，多個單選框，都在一個分組裏，同一時間，只能選中一個單選框 設置name屬性相同即可<p>今天晚上做什麽？</p> 學習java<in

js自定義右鍵選單，點選自定義選單隱藏、顯示指定div

       首先寫好自己想要的右鍵選單的樣子，然後設定該選單div為預設隱藏，滑鼠右擊後設置css顯示該選單(display:block;)，並禁用瀏覽器右鍵預設選單。 接下來就可以寫選單中具體項的

Android自定義圖片選取器，類似微信樣式，自帶裁剪功能，適配Android7.0

不知道為什麼README文件在github上排版格式全亂了，所以寫個部落格當文件看吧 ImagePicker 這是一個Android使用的自定義圖片選擇器，眾所周知，Android碎片化問題嚴重，其中就包括圖片選擇的問題，呼叫系統相簿選擇圖片或裁剪圖片時

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

自定義單選框選中

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

spring mvc：常用標簽庫(文本框，密碼框，文本域，復選框，單選按鈕，下拉框隱藏於，上傳文件等)

標簽庫 state -h ring lib ati gap 下拉列表 hiberna 在jsp頁面需要引入：<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>標簽. 文

自定義單選框和多選框

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

自定義單選框樣式方法

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

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

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

自定義單選框樣式

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

react-native自定義單選框元件

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

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

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

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

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

ionic3自定義單選

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

單選框，多選框樣式

單選 har bsp spl enter log ott min right 主要註意before和after的樣式設置，input要設置id，label要設置for值並且等於相應的input值的id HTML <!DOCTYPE html><html&

mui開發中獲取單選按鈕、復選框的值

nbsp ++ element pretty 按鈕 選擇 return null 單選按鈕的值 js獲取單選按鈕的值 function getVals(){ var res = getRadioRes(‘rds‘); if(res == null){mui.

vue.js實現單選框、復選框和下拉框

new type 方式 避免 -- js實現 處理 scrip 按鈕 Vue.js可以很方便的實現數據雙向綁定，所以在處理表單，人機交互方面具有很大的優勢。下邊以單選框、復選框和下拉框為例介紹他們在HTML和Vue.js中的具體實現方式。 一、單選框 在傳統的HTML