css3 单选按钮美化,CSS3单选多选按钮美化特效

http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

content="width=device-width, initial-scale=1.0">

CSS3单选多选按钮美化特效

rel="stylesheet">

rel="stylesheet">

href="https://www.fjnjb.com/1.8.36/css/materialdesignicons.min.css">

href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css">

href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

rel="stylesheet">

type="text/css" href="css/demo.css">

type="text/css" href="src/pretty.min.css">

id="checkbox">基本的Checkbox

class="pretty">

Square

class="pretty curvy">

Curvy

class="pretty circle">

Circle

自定义图标

class="pretty">

Include

class="pretty curvy">

Favorite

class="pretty circle">

Add

checkbox的颜色

class="pretty primary">

Primary

class="pretty success">

Success

class="pretty warning">

Warning

class="pretty info">

Info

class="pretty danger">

Danger

checkbox边框颜色

class="pretty o-primary">

Primary

class="pretty o-success">

Success

class="pretty o-warning">

Warning

class="pretty o-info">

Info

class="pretty o-danger">

Danger

鼠标滑过效果

class="pretty primary hover">

Solid

class="pretty o-success hover">

Outline

不带边框的checkbox

class="pretty o-success plain">

Include

class="pretty o-danger plain">

Ignore

平滑的动画效果

class="pretty smooth">

Jan

class="pretty o-info circle smooth">

Feb

class="pretty danger smooth">

Mar

class="pretty success circle smooth">

Apr

另类的checkbox动画效果

class="pretty info circle a-bounce">

Bounce

class="pretty info circle a-jelly">

Jelly

class="pretty info curvy a-tada">

Tada

class="pretty info curvy a-vibrate">

Vibrate

class="pretty info curvy a-rotate">

Rotate

禁用checkbox

class="pretty inline">

disabled>

Disabled

class="pretty circle">

disabled>

Disabled

class="pretty success">

disabled>

Disabled

---

checkbox切换效果

切换图标

class="pretty toggle">

ON

OFF

不带边框

class="pretty plain toggle">

WIFI ON

WIFI OFF

黑白色

class="pretty plain toggle">

Preview

Preview

class="pretty plain toggle">

Play

Pause

class="pretty plain toggle">

Read

Unread

切换时改变颜色

class="pretty plain toggle">

Good

Bad

class="pretty plain toggle">

Reply

Forward

---

单选按钮

基本的单选按钮

class="pretty circle">

name="radio1">

class="default"> Male

class="pretty circle">

name="radio1">

class="default"> Female

class="pretty circle">

name="radio1">

class="default"> Special

单选按钮颜色

class="pretty circle primary">

name="radio19">

class="default"> Primary

class="pretty circle success">

name="radio19">

Success

class="pretty circle info">

name="radio19">

class="default"> Info

class="pretty circle warning">

name="radio19">

Warning

class="pretty circle danger">

name="radio19">

class="default"> Danger

带矩形边框的单选按钮

class="pretty inline">

name="radio2">

Male

class="pretty inline">

name="radio2">

Female

class="pretty inline">

name="radio2">

Special

带矩形边框和颜色的单选按钮

class="pretty primary">

name="radio18">

class="default"> Primary

class="pretty success">

name="radio18">

class="default"> Success

class="pretty info">

name="radio18">

class="default"> Info

class="pretty warning">

name="radio18">

class="default"> Warning

class="pretty danger">

name="radio18">

class="default"> Danger

边框颜色变化的单选按钮

class="pretty circle o-primary">

name="radio4">

$10

class="pretty circle o-success">

name="radio4">

$50

class="pretty circle o-info">

name="radio4">

$100

class="pretty circle o-warning">

name="radio4">

$500

class="pretty circle o-danger">

name="radio4">

$1000

不带边框的单选按钮

class="pretty circle plain o-primary">

name="radio5">

Single

class="pretty circle plain o-success">

name="radio5">

Married

class="pretty circle plain o-info">

name="radio5">

In relationship

单选按钮的平滑动画

class="pretty circle smooth o-primary">

name="radio44">

Cool

class="pretty circle smooth o-success">

name="radio44">

Emotion

class="pretty circle smooth o-info">

name="radio44">

Happy

class="pretty circle smooth o-warning">

name="radio44">

Neutral

class="pretty circle smooth o-danger">

name="radio44">

Devil

另类动画的单选按钮

class="pretty circle a-tada smooth o-primary">

name="radio66">

Lightning

class="pretty circle a-rotate smooth o-success">

name="radio66">

Cloudy

class="pretty circle a-bounce smooth o-info">

name="radio66">

Raining

class="pretty circle a-jelly smooth o-warning">

name="radio66">

Snowy

class="pretty circle a-vibrate smooth o-danger">

name="radio66">

Windy

禁用单选按钮

class="pretty circle">

name="radio6" disabled>

Today

class="pretty circle info">

name="radio6" checked disabled>

Tomorrow

class="pretty circle">

name="radio6" disabled>

Next week

切换单选按钮图标

class="pretty circle plain toggle">

name="radio8">

Bluetooth

Bluetooth

class="pretty circle plain toggle">

name="radio8">

Wifi

Wifi

class="pretty circle plain toggle">

name="radio8">

Ethernet

Ethernet

不带labels

class="pretty circle plain toggle">

name="radio9" checked>

class="pretty circle plain toggle">

name="radio9">

---

自定义字体图标

FONTAWESOME

class="pretty success smooth">

fa-check

class="pretty circle plain o-danger smooth">

fa-close

class="pretty plain smooth toggle">

fa-heart-o

fa-heart

BOOTSTRAP

GLYPHICONS

class="pretty success smooth">

glyphicon-ok

class="pretty circle plain o-danger smooth">

glyphicon-remove

class="pretty plain smooth toggle">

glyphicon-heart-empty

glyphicon-heart

MATERIAL

DESIGN ICONS (MDI)

class="pretty success smooth">

mdi-check

class="pretty circle plain o-danger smooth">

mdi-close

class="pretty plain smooth toggle">

mdi-heart-outline

mdi-heart

MATERIAL

DESIGN ICONS (ZMDI)

class="pretty success smooth">

zmdi-check

class="pretty circle plain o-danger smooth">

zmdi-close

class="pretty plain smooth toggle">

zmdi-favorite-outline

zmdi-favorite

TYPICONS

class="pretty success smooth">

typcn-tick

class="pretty circle plain o-danger smooth">

typcn-times

class="pretty plain smooth toggle">

typcn-heart-outline

typcn-heart

IONICONS

class="pretty success smooth">

class="ion-checkmark-round">

ion-checkmark-round

class="pretty circle plain o-danger smooth">

class="ion-close-round"> ion-close-round

class="pretty plain smooth toggle">

class="ion-ios-heart-outline">

ion-ios-heart-outline

ion-ios-heart

GOOGLE

MATERIAL DESIGN ICONS

class="pretty success smooth">

data-icon="done"> done

class="pretty circle plain o-danger smooth">

data-icon="clear"> clear

class="pretty plain smooth toggle">

data-icon="favorite_border">

favorite_border

favorite

style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft

YaHei';">

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.不支持Safari、IE8及以下浏览器。

来源：

target="_blank">