如何修改複選框的樣式（其他input標籤類推）

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

1.傳統的方法
原理：通過label來控制複選框的樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用label實現複選框的樣式更改</title>
    <style>
        .checkbox{display: inline-block;width: 30px;height: 30px;background: #563fc2;border-radius: 50%;}
        input{width 
: 20px;height: 20px;background: #f00;opacity: 0;}

    </style>
</head>
<body>
    <label for="id" class="checkbox"> <input type="checkbox" id="sex"> </label>
    <label for="id" class="checkbox"> <input type="checkbox" id="sex"> </label>
    <script src 
="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
   <script>    
   $(".checkbox").click(function(){
       if($(this).find("#sex").is(':checked')) {
              $(this).css("background","#ff0");
         }else{
              $(this).css("background","#563fc2");
         }
   });
    
</script>
</body>
</html>

2.通過字型圖示實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用label實現複選框的樣式更改</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input[type="checkbox"]{position: relative;background: 0;border: 0;width: 20px;height: 20px;}
        input[type="checkbox"]::before{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: "\f14a"; font-size: 30px;background: #fff; } 
        input[type="checkbox"]:checked::before{display: block;position: absolute;left:0;top:0;width:30px;height: 30px;
          content: "\f046";}

    </style>
</head>
<body>
    <input type="checkbox" id="sex" class="fa">
</body>
</html>

如何修改複選框的樣式（其他input標籤類推）

1.傳統的方法原理：通過label來控制複選框的樣式 <!DOCTYPE html> <html> <head> <meta charset=

用input輸入框實現好看的複選框效果（css+jq）

做畢設果然是道阻且長QAQ，在用到一個複選框的時候由於嫌棄複選框實在太醜了，就自己做了一個。其中沒有用到任何圖片，用css和jQuery實現。廢話不多說直接看最後效果： html元素的設計如下

關於jsp頁面checkbox複選框的預設樣式的修改(自定義複選框樣式)

checkbox複選框的預設樣式太low，最近做的專案我選擇了自定義樣式，網上找了不少文章內容冗餘，並且並不是都有效果，所以將自己過程整理出來，以備後用。只要在jsp頁面和css樣式表中新增相應程式碼即可：一、jsp頁面：<div class="container"&g

單選框，複選框樣式修改

1: input[type=radio],input[type=checkbox] { display:inline-block; vertical-align:middle; width:20px; height:20px; margin-left:5px; -webkit-appearance

JQuery Mobile - 修改複選框的選中狀態無效解決辦法！

今晚，在編寫JQuery Mobile程式時候，需要在程式碼裡面控制複選框的選中狀態，很簡單的程式碼啊，很快完成了！等測試程式時候傻眼了，頁面無論如何也不按照我寫的程式碼顯示出來！問題出在哪裡呢？是我寫的控制狀態程式碼有問題？檢視資料，最終使用prop來控制狀態。理應可以了吧？但是還不行，頁面還是沒有正常顯示

小程式：點選複選框改變繫結的標籤樣式

這是一篇嘔心瀝血的小程式教程從昨天下午到現在才弄明白的實現方法如果你有更好的方法請分享給我吧～需求是這樣的哪個被選中就改變哪個的樣式我放的明明是動態圖但是它不動我也沒辦法正常來說這個用jq來做是非常簡單的但是小程式中沒辦法操作Dom 所以這個過

bootstrap-table自定義複選框樣式

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

【轉載】jquery實現勾選複選框觸發事件給input賦值+回顯複選框

JSP： <td class="as1"> <input type="checkbox" name="gdzc" value="1" id="t0" class="az"/><label for="t0" class="as">商品房</label><

CSS 複選框樣式問題

開發十年，就只剩下這套架構體系了！ >>>

CSS自定義select選擇框樣式（右側下拉箭頭）

如圖：自定義select的箭頭樣式 HTML以及CSS程式碼如下： <select class="form_select"> <option value="0">請選擇</option> <option value=

修改單選框，複選框預設樣式 input[type='radio'] input[type="checkbox"]

由於業務需求，本樣式中修改的單選框和複選框的樣式是一樣的。效果圖：複選框單選框

使用 CSS 修改 HTML 預設單選（radio）和複選框（checkbox）樣式（網頁版）

HTML 預設的單選和複選框有多醜大家都是有目共睹，所以我們UI設計的小哥哥小姐姐們在設計時候，為了美觀經常會設計一些漂亮的單選或者複選框，這就要求我們前端開發童鞋必須去修改HTML單選複選框的預設樣式，當然修改的方式有很多種，我在這裡展示的是如何用CSS來修改

input checkbox 複選框大小修改

有的時候，需要使用複選框，但是複選框有時候預設的太小，這時候就需要加大複選框，網上搜了很多，都沒有直接的解決方法，一種是採用div 擴大點選範圍或者是採用圖片替代。直到看到下面一篇介紹，使用了下，才可以達到我想要的效果，試了下ie和谷歌都支援。參考 https:/

使用css美化單選框（radio）和複選框（checkbox）的樣式

//html <label> <input name="checkbox" class="checkbox" type="checkbox"/> <s>

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

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

HTML複選框checkbox預設樣式修改

此方法可以將複選框的預設樣式替換成任意樣式。如圖：未選擇：選擇時：思路：將複選框隱藏，利用lebal元素的焦點傳遞特性，用lebal的樣式替代複選框。程式碼如下： <!DOC

html修改radio、checkbox樣式純CSS改寫checkbox樣式，讓複選框看起來更舒服一些

原生的checkbox、radio樣式不好看，試試把以下程式碼進去看看。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link hr

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

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

九九乘法表+計算器+複選框（全選+反選）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/jav

Angular2可以使用的獲取複選框（checkbox）的值的一種方法

樓主剛接觸angular2...需要實現一個checkbox，但是網上搜了很多資料都是angularJs的，基本不能通用，終於找到能用的方法，（不敢說合適），現在記錄如下：樓主的checkbox是迴圈裡生成的，所以就以迴圈方法為例如下是html程式碼，樓主的情景是勾選複選框框，然後批量刪

如何修改複選框的樣式（其他input標籤類推）

相關推薦