自定義單選框樣式
大多數情況下我們需要重新定義單選框的樣式,比如下圖:
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: '黑色' }],//模擬商