html radio vue,Vue.js自定义Radio选项按钮

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

:root {

font-size: 16px;

}

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

margin: 0;

padding: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.radio-btn-group {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

.radio-btn-group .radio {

margin: 0 .25rem;

}

.radio-btn-group .radio label {

background: #fff;

border: 1px solid #ddd;

padding: .5rem 1.25rem;

border-radius: 5px;

cursor: pointer;

color: #444;

-webkit-transition: box-shadow 400ms ease;

transition: box-shadow 400ms ease;

}

.radio-btn-group .radio label:hover {

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.radio-btn-group .radio input[type="radio"] {

display: none;

}

.radio-btn-group .radio input[type="radio"]:checked + label {

background: #2196F3;

color: #fff;

border-color: #2196F3;

}

.show {

font-weight: 400;

color: #444;

}

.show span {

background: #f5f5f5;

color: #F44336;

border-radius: 3px;

padding: .25rem .5rem;

font-size: 1.25rem;

border: 1px solid #f1f1f1;

}