Css實現checkbox及radio樣式自定義
前言
checkbox和radio樣式自定義在網頁中是很常見的, 比如在進行表單輸入時性別的選擇,使用者註冊時選擇已閱讀使用者協議。隨著使用者對產品體驗要求越來越高,我們都會對checkbox和radio重新設計,checkbox預設的樣式非常醜 ,無法直接修改checkbox和radio的樣式,這裡我們藉助label標籤來對它進行樣式美化。
先看實現效果圖,如下:
實現思路
1.設定input 屬性hidden對該input進行隱藏,或者通過display:none也可以
<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
2.藉助label for標籤通過id繫結input ,這樣在點選label時實際就是點選了input
<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
<label for="adviceRadio1" class="advice"></label>
3.定義label的樣式,設定未選中狀態的背景圖
.advice{ height: 12px; width: 12px; display: inline-block; background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png'); background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-top: -4px; }
4.使用相鄰選擇器設定選中狀態label的樣式
input[type="radio"]:checked + .advice{
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
}
實現程式碼
請選擇反饋的問題: <label> <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/> <label for="adviceRadio1" class="advice"></label> <span class="radio-name">問題</span> </label> <label> <input type="radio" name="type" id="adviceRadio2" value="2" hidden/> <label for="adviceRadio2" class="advice"></label> <span class="radio-name">建議</span> </label> <span id="result">1</span> <style type="text/css"> .advice{ height: 12px; width: 12px; display: inline-block; background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png'); background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-top: -4px; } input[type="radio"]:checked + .advice{ background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png'); } </style>
以上是radio單選框的實現程式碼,checkbox也是類似 將input type定義成checkbox即可
獲取radio及checkbox選中的值
1.獲取radio的值
使用jquery獲取radio的值有3種方式:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.獲取checkbox的值
var obj = document.getElementsByName("hobby");
var check_val = [];
for(k in obj){
if(obj[k].checked){
check_val.push(obj[k].value);
}
}
遇到的坑
一開始寫的時候,我是使用偽元素的方式實現,先將input進行隱藏 ,然後設定input:after定義它的樣式,程式碼如下:
//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>
//css
input[type=radio]{
visibility: hidden;
}
input[type=radio]:checked::after{
background-image: url('./img/sprite.png');
background-repeat: no-repeat;
background-position: -59px -10px;
visibility: visible;
}
input[type=radio]::after{
content: ' ';
display: block;
height: 20px;
width: 20px;
background-image: url('./img/sprite.png');
background-repeat: no-repeat;
background-position: -24px -10px;
visibility: visible;
}
但是後來發現這種方式相容性有問題,在firefox瀏覽器無法顯示,經查資料是因為input不支援偽元素:after,:before 。
火狐瀏覽器無法插入內容DOM元素,偽元素都是在容器內進行渲染的。input無法容納其他元素,因此它不支援偽元素。
input,img,iframe等元素都不能包含其他元素,所以不能通過偽元素插入內容。至於Chrome 中checkbox和radio可以插入應該就是bug了
input要配合其它容器元素(i,span)等實現預期效果
相關資料
相關推薦
Css實現checkbox及radio樣式自定義
前言 checkbox和radio樣式自定義在網頁中是很常見的, 比如在進行表單輸入時性別的選擇,使用者註冊時選擇已閱讀使用者協議。隨著使用者對產品體驗要求越來越高,我們都會對checkbox和radio重新設計,checkbox預設的樣式非常醜 ,無法直接修改checkbox和radio的樣式,這裡我們藉助
Css實現radio樣式自定義
實現思路 1.設定input 屬性hidden對該input進行隱藏,或者通過display:none也可以 <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
css input checkbox和radio樣式美化
tex 功能 pri pretty radi 方法 soft cursor 上傳 css input checkbox和radio樣式美化 2014年9月1日 132495次瀏覽 在之前的一篇文章中,我已經介紹了input file上傳按鈕的美化,地址:http://ww
IOS控制元件-UILabel的使用 及字型樣式自定義
Label的簡單使用 //建立一個label標籤 並給它一個顯示區域 let label=UILabel(frame: CGRect(x: 10, y: 100, width: 300 , height: 150
h5 range實現slider滑塊功能及樣式自定義
公司最近人手不足,於是,又開始折騰起Html來了 本文主要講slider滑塊的實現、樣式自定義、刻度繪製、與輸入框的聯動 ######我們先來看看效果圖 上圖中,我們需要實現的難點就是那個綠色的滑塊,其它都是輸入框及文字框,容易實現。 ###滑塊的實現 其實,只要設定input
css 快捷修改 checkbox 及 radio的背景圖
png fff put input middle web radi pre 情況 在CSS內選擇要修改的input input[type=checkbox]:disabled{ //input類型等於復選框並且是disabled狀態的所有(根據情況自由指定)
input[type="radio"]自定義樣式
就是 isp 目標 關聯 自己的 繪制 image 會有 技術分享 input為radio時,雖然會有默認選中的樣式,但是並不符合大多數項目的需求,我們的目標是可以隨心所欲自定義它的樣式。怎麽做呢?其實很簡單,只要抓住3點。分別是1.label 2.隱藏自帶樣式 3.繪制我
select2 去掉邊框,及樣式自定義
<style> .tesu_select { position:
Java資料結構-陣列解析及類封裝自定義陣列實現
概念: 陣列是Java資料結構中最基本的資料,是儲存 一組長度固定的 同資料型別的集合。 優點: 插入快:對於無序陣列,只需要在陣列末尾增加資料即可。但對於有序陣列,需要查詢到固定的位置,再插入資料,相對無序陣列 結構簡單 缺點: 根據元素值查
andrioid——checkbox勾選按鈕自定義樣式
1、第一步:在res/drawable目錄下新建自定義checkbox勾選按鈕圖片的xml檔案tab_protocol_checkbox。當checkbox被選中時,顯示checkbox_pressed圖片(android:state_checked=”true
CheckBox設定顏色和自定義樣式
設定顏色: android:buttonTint="@color/colorGreen" 自定義樣式: android:button="@null" <CheckBox
CheckBox 單選按鈕自定義樣式
(1)在drawable資料夾下建立xml檔案,檔名自定義<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android
DIV+CSS實現兩邊固定寬度,中間自適應寬度
round gin itl lan enter color css 寬度 自適應 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
Jquery Validate 默認校驗規則及常用的自定義驗證規則
字符 eth ber exp string amp 手機 zip 子郵件 Jquery Validate 相關參數及常用的自定義驗證規則 一、官網地址:http://bassistance.de/jquery-plugins/jquery-plugin-validatio
Spring Boot使用@Async實現異步調用:自定義線程池
tor color HR cal ace 核心 異步 cond cor 前面的章節中,我們介紹了使用@Async註解來實現異步調用,但是,對於這些異步執行的控制是我們保障自身應用健康的基本技能。本文我們就來學習一下,如果通過自定義線程池的方式來控制異步調用的並發。 定
ASP.NET WebApi OWIN 實現 OAuth 2.0(自定義獲取 Token)
href timespan 獲取 edi prot cep b- med 2-0 相關文章:ASP.NET WebApi OWIN 實現 OAuth 2.0 之前的項目實現,Token 放在請求頭的 Headers 裏面,類似於這樣: Accept: application
Vue 項目實現微信分享的自定義分享鏈接問題解決
情況 錯誤 目的 是個 找問題 自定義分享 當前頁 不用 appid 前言: 前兩天在做微信公眾號裏的項目的時候有一個需求是在 vue 項目中實現微信分享,然後在自定義分享鏈接的時候出了一些問題,分享出去的自定義鏈接(鏈接中攜帶參數)總是會直接跳到項目首頁,而且是玄學跳
css實現右尖括號樣式
height light right 分享 pre pos wid orm css .arrow{ width: 6px; height: 6px; border-top: 1px solid #999; border-right: 1px solid #
博客園樣式自定義(待更新)
ava white tde 百度一下 padding element win timer rip 總感覺這件事情做的晚了哈哈。 以前寫博客總是一個人默默地寫,現在竟然出現了兩個吐槽我挖坑不填的哈哈。(非常感謝~) 大概是終於有個人能夠督促自己學習了,你們怎麽不早點來?!!
Jquery Validate 相關參數及常用的自定義驗證規則
手機號碼驗證 cti dea 復制 接收 least join cep mat 一、官網地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 二、默認校驗規則 1