純css3美化checkbox、radio預設樣式

阿新 • • 發佈：2018-11-01

一、效果展示

這裡寫圖片描述

二、實現步驟

1、隱藏預設的樣式

     -webkit-appearance: none;
     appearance: none;
     outline: none;

2、css3的對號樣式

    content: "\2713";

3、選中的css放到after選擇器

    input[type=checkbox]:checked::after

三、全部實現程式碼 (直接複製到xxx.html就能看到效果)

<html>
<head>
    <style 
>
        label { /*flex佈局讓子元素水平垂直居中*/
            display: flex;
            align-items: center;
            justify-content: center;
        }

        input[type=checkbox],input[type=radio] {
            -webkit-appearance: none;
            appearance: none;
            outline: none;
            width 
: 12px;
            height: 12px;
            cursor: pointer;
            vertical-align: center;
            background: #fff;
            border: 1px solid #ccc;
            position: relative;
        }

        input[type=checkbox]:checked::after {
            content: "\2713";
            display 
: block;
            position: absolute;
            top: -1px;
            left: -1px;
            right: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border: 1px solid #ddd;
            color: red;
            font-size: 12px;
        }
        input[type=radio]:checked::after {
            content: "";
            display: block;
            position: absolute;
            top: 2px;
            left: 2px;
            right: 0;
            bottom: 0;
            width: 6px;
            height: 6px;
            background-color: red;
        }
        input[type=radio], input[type=radio]:checked::after {
            border-radius: 50%;
        }
    </style>
</head>

<body>
<label><input type="checkbox" />1111</label>
<label><input type="checkbox" />222</label>
<label><input type="radio" name="test"/>aaa</label>
<label><input type="radio" name="test"/>bbb</label>
</body>

</html>

純css3美化checkbox、radio預設樣式

一、效果展示二、實現步驟 1、隱藏預設的樣式 -webkit-appearance: none; appearance: none; outline: none; 2、css3的對號樣式 con

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

技術分享 eat sel 操作 box dom元素 turn 第一個 input 在使用 Javascript 編寫前臺腳本的時候，經常會操作 Html 控件，比如 checkbox、radio、select，用 Jquery 庫操作其他會方便很多，下面用Jq對這些控件的操

validate針對checkbox、radio、select標簽的驗證

成功 blank sele form 賦值示例代碼字母 parent appendto jquery.validate 是jquery的一個插件，用來輔助開發者在客戶端方便快捷的實現表單驗證，最終達到提高用戶體驗的目的。示例代碼 <form id="fo

jquery-validate.js驗證selcet、checkbox、radio

<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'> <select name="like_product" class="form

小程式修改radio預設樣式

<radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{classes_array}}" wx:key="{{index}}"&g

html自定義checkbox、radio、select —— checkbox、radio篇

前些日子，所在公司專案的UI做了大改，前端全部改用 Bootstrap 框架，Bootstrap的優缺點在此就不詳述了，網上一大堆相關資料。前端的設計就交給我和另一個同事[LV，大學同班同學，畢業後在同一家公司同一個部門同一個專案組共事，現在他離職跑去創業了，小小懷念一下他]，由於我們都是不喜歡 htm

jquery validate外掛的參考使用 checkbox、radio提示資訊如何新增

這篇文章詳細而全面的介紹了jquery validate的使用：http://blog.csdn.net/nchu2020/article/details/51295239 同時借用了這篇文章的內容，說明如何對checkbox、radio新增錯誤資訊提示 http://b

純CSS3特效 Checkbox和Radiobox按鈕外觀很時尚

用CSS3我們可以打造非常具有個性化的使用者表單，今天我們就利用CSS3美化checkbox複選框和Radiobox單選框。CSS3美化checkbox和Radiobox的原理很簡單，在頁面上新建一個checkbox和radiobox並給予他們預設的label標籤顯示文字

validate針對checkbox、radio、select標籤的驗證

jquery.validate 是jquery的一個外掛，用來輔助開發者在客戶端方便快捷的實現表單驗證，最終達到提高使用者體驗的目的。示例程式碼 <form id="formLogin" method="post"> <div>

微信小程式--修改checkbox和radio的樣式

在微信小程式裡面，有時候為了配合整個專案的風格，checkbox和radio的樣式會有些不同。1. 修改checkbox樣式.wxml<checkbox-groupclass='pull-left'bindchange="checkboxChange"><l

struts2中設定select、radio預設選中已設定的值

<s:radio> eg: <s:radio name="invalid" list="#{'0':'啟用(預設)','1':'禁用'}" theme="simple" value="'0'"/> <s:radio name="invalid"

微信小程式: button 修改樣式(增加checkbox和radio的樣式修改)

專案需求，登陸介面的button需要使用橙色的bg，而在輸入手機號碼的時候，確認button 是disabled的。而預設的樣式是綠色的，而直接類選擇器設定樣式，是沒有效果的，在群友的幫助下，在butt

css：預設的checkbox、input、radio太醜了？手把手教你改變使用純css3改寫的帶動畫的預設樣式

專案的github地址為： https://github.com/sunshine940326/css3formeledemo 本文首發於我的個人部落格，http://cherryblog.site/ ；歡迎大家檢視我的其他部落格最近在

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

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

css input checkbox和radio樣式美化

tex 功能 pri pretty radi 方法 soft cursor 上傳 css input checkbox和radio樣式美化 2014年9月1日 132495次瀏覽在之前的一篇文章中，我已經介紹了input file上傳按鈕的美化，地址：http://ww

純css3單選框美化樣式

先將原單選框隱藏：display：none；再美化。 <div class="select_btn"> <input type="checkbox" id="checkbox_meihua" class="checkbox_style"

input的checkbox和radio控制元件樣式美化

複選框 Checkbox 是 Web 應用常用控制元件，隨處可見，原生的複選框控制元件一般不能滿足我們的需求，設計師喜歡一些漂亮的圖片，用css做出此效果。 <input type="checkbox" id="gps_open_close" /> i

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

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

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

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

單選框radio總結（獲取值、設定預設選中值、樣式）

input[type="radio"] + label::before { content: "\a0"; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-ri

純css3美化checkbox、radio預設樣式

一、效果展示

二、實現步驟

三、全部實現程式碼 (直接複製到xxx.html就能看到效果)

相關推薦