1. 程式人生 > >自定義單選框樣式

自定義單選框樣式

大多數情況下我們需要重新定義單選框的樣式,比如下圖:


html程式碼如下:

<div class="user-info-detail">
    <p>
        <span class="item-name">性別</span>
        <label class="choice-item radio-sex" for="radio1">
            <input id="radio1" name="sex" type="radio" value="MAN"/><span></span>男
        </label>
        <label class="radio-sex" for="radio2">
            <input id="radio2" name="sex" type="radio" value="MALE"/><span></span>女
        </label>
    </p>
<div>

css程式碼如下:

.user-info-detail{
        margin: 0 30px;
        p{
          position: relative;
          height: 40px;
          line-height: 40px;
          margin-bottom: 18px;
          font-size: 14px;
          .item-name{
            display: inline-block;
            width: 72px;
            margin-right: 18px;
            color: #999;
            text-align: right; 
          }   
          label{
            position: relative;
            padding:0 10px 0 25px;
            span{
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 16px;
              height: 16px;
              margin: auto;
              border: 1px solid #ccc;
              border-radius: 100%;
              &:after{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 6px;
                height: 6px;
                margin: auto;
                border-radius: 100%;
                background: #fff;
                //-webkit-transform: scale(0);
                //transform: scale(0);
                //-webkit-transition: all .3s;
                //transition: all .3s;
              }
            }
          }
          .choice-item{
            margin-right: 25px;
          }
          input[type="radio"]{
            display: none;
          }
          input[type="radio"]:checked + span{
            border-color: #34dacc;
            background: #34dacc;
          }
        }
      }

如果給該單選框賦初始值,可以這樣:

$(".radio-sex input[value="+ data.sex +"]").attr("checked",true);


相關推薦

定義樣式方法

元素的初始樣式都不怎麼好看,我們一般修改樣式會想到直接在那元素上新增樣式,比如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: '黑色' }],//模擬商