input勾選框樣式

阿新 • • 發佈：2019-01-21

html程式碼：

<div class="agreement-border">
	<input type="checkbox" id="register-agreement" class="agreement" name="agreement" onclick="checkboxChecked(this);">
	<div></div>
</div>

css程式碼：

.agreement-border {
    border: 1px solid #32425b;
    float: left;
    height: 12px;
    margin-right: 26px;
    position: relative;
    width: 12px;
}
.agreement-border div {
    background: url("globals/gou.png") no-repeat;
    display: none;
    height: 18px;
    margin: -2px;
    position: absolute;
    top: -1px;
    width: 18px;
}
<pre name="code" class="html">.agreement-border .agreement {
    height: 16px;
    margin: -2px;
    position: relative;
    width: 16px;
    z-index: 99;
    opacity: 0; /*Chrome、Safari、Firefox、Opera */ 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE6/IE7/8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*  IE8 */
 }

js程式碼：

/**
 * checkbox勾選樣式
 */
function checkboxChecked(t) {
	if(t.checked == true){
		$(t).next().show();
	}else{
		$(t).next().hide();
	}
}

結果：

input勾選框樣式

html程式碼： <div class="agreement-border"> <input type="checkbox" id="register-agreement" cl

勾選框樣式

/勾選框–start/ .checkbox{ display: none; } .checkbox-label{ display: inline-block; width: 12px; height: 12px; background: url("/videoP

input radio單選框樣式優化

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

input控制元件的checkbox屬性自定義勾選框

思路首先隱藏input預設勾選框通過繫結label標籤，設定label的樣式來設定勾選框效果程式碼 # html中input的checkbox定義，使用for迴圈建立多個checkbox並繫結到label上 <div class="tab_1

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

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

jquery中input復選框的checked屬性

改變是否 html中數字 html prop defined 字符串 put 　　　在今日的多選，反選，全選試驗中，關於通過jQuery方法來實現復選框的選中與否問題，我有了以下發現： 1.不能通過.css(‘checked‘，‘checked‘)方法來設置或者獲取復選

input 復選框

註意 bool del 類型接口 src 數值 ges cat 需求：input復選框中的值是從接口裏返回，遍歷顯示的，然後要點擊任一值查詢相應信息這裏要註意一點，ng-model綁定的值是Boolean類型的，不是一個數值 APICategory接口返回的就是遍

單選框，多選框樣式

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

簡易復選框樣式設置

tar image css 11.2 input scrip ext col change 受這篇文章啟發一大堆的 CSS 自定義復選框主要是 <input type="checkbox" id="checkbox-1" /> <label for=

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

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

利用純 CSS3 定製單選/多選框樣式

寫於 2016.01.20 在前端開發中，往往需要對預設元素的樣式進行修改。然而有的元素卻不是那麼容易就能找到它所對應的樣式的，今天要討論的重點內容就是<input type="checkbox">以及<input type="radio">這兩款預設表單元素的樣式修改問題

編輯框，單選框，勾選框，複選框相關操作

編輯框的一些操作用clear方法清除該元素裡面的字串 #輸入框開啟的時候，已經有內容了 input1.clear() 獲取input元素裡面輸入的文字內容 #獲取輸入框裡面已經有的內容 input1.get_attrib

自定義單選框樣式方法

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

單選框樣式示例

<body>this is a checkbox<input type="checkbox" style="position:absolute;clip:rect(5,14,14,5);background:red" id="myCheckbox"><span style="po

js移除input單選框（radio）選中效果

上午做類似於這樣一個單選框效果，需要把彈窗內單選框後的文字賦值到彈窗父頁面。可是在js中移除最開始是這麼做的。 $('.chose-box-li').children('input').attr('checked', 'true') $(this).children

js動態生成勾選框，可單選可多選

1、動態生成的位置，html程式碼： <body> <div class="show" id="show"> </div> </body> 2、這是ajax()的一部分，從資料庫取得所需的資料succes

Checkbox勾選框在cookie裡checked屬性的時間問題

Checkbox 物件代表一個 HTML 表單中的一個選擇框。比如在cookie裡的儲存10天登入這樣的選擇框。這裡有一點不明白，因為Checkbox有一個屬性checked，如果設定了就預設是勾選了。 <td colspan

bootstrap-table自定義複選框樣式

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

自定義UITableViewCell勾選框的保持

1//定義協議 @protocol FreeStockTableViewCellDelegate <NSObject> -(void)button:(UIButton*)button andStock_code:(NSString *)stockCode

簡單的checkbox多選框樣式修改（純css3）

今天在做專案的時候有需要用到多選框，並且因為ui的關係，需要稍微美化一下多選框，所以找到了實現方法，挺實用的，不需要指令碼就能實現。前端佈局如下：<input class="select-tag-input" type="checkbox" id="tag-id"sty

input勾選框樣式

相關推薦