vue.单选和多选，纯css自定义单选框样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta>
<title>Document</title>
<script src="../vue.js"></script>
<style>
ul, li {
list-style-type: none;
} * {
margin: 0;
padding: 0;
} .border-1px {
position: relative;
} .border-1px:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, .1);
content: ' ';
} @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
.border-1px::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
} @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
.border-1px ::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
} #example {
margin: 20px;
} h3 {
font-size: 26px;
margin-left: 20px;
height: 60px;
} .self-radio {
display: none;
} .self-radio + label {
-webkit-appearance: none;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 50px;
display: inline-block;
position: relative;
width: 30px;
height: 30px;
box-sizing: border-box;
} .self-radio:checked + label {
border: 1px #47d9bf solid;
} .self-radio:checked + label:after {
position: absolute;
top: 9px;
left: 9px;
content: ' ';
width: 10px;
height: 10px;
border-radius: 50px;
background: #47d9bf;
box-shadow: 0px 0px 5px 0px #47d9bf;
} .check-area {
display: inline-block;
width: 400px;
padding: 12px 20px;
border: 1px solid #aaa;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
} li {
height: 60px;
} li .self-radio + label {
vertical-align: middle;
} li span {
margin-left: 20px;
display: inline-block;
line-height: 60px;
font-size: 22px;
} p {
height: 60px;
line-height: 60px;
margin-left: 20px;
} p span {
color: #f00;
} .btn {
margin: 20px auto;
width: 100%;
text-align: center;
} .btn button {
width: 120px;
height: 40px;
line-height: 30px;
font-size: 16px;
color: #fff;
background: #47d9bf;
border: 1px #23d5b6 solid;
border-radius: 6px;
text-align: center;
outline: none;
} .btn button:hover {
background: #23d5b6;
}
</style>
</head> <body>
<div id="example">
<h3>单选按钮</h3>
<div class="check-area" v-show="items.length!=0">
<ul>
<li class="border-1px" v-for="(item,index) in items">
<input class="self-radio" type="radio"
:id="'radio-'+item.id"
:data-id="'food-'+item.id" name="radio"
:checked="index==0"
:value="item.value"
v-model="checkValue">
<label :for="'radio-'+item.id" @click="setCheckValue(item)"></label>
<span>{{item.value}}</span>
</li>
</ul>
<p>您选择了：<span>{{checkValue}}</span></p>
<div class="btn">
<button @click="showCheck(checkId)">按钮</button>
<span>{{checkId}}</span>
</div>
</div>
</div>
<script>
var itemData = [{id: '20170811001', value: '香蕉'},
{id: '20170811002', value: '苹果'},
{
id: '20170811003',
value: '梨子'
}, {id: '20170811004', value: '葡萄'}]
//itemData = [];
var vm = new Vue({
el: '#example',
data: {
items: '',
checkValue: '',
checkId: ''
},
methods: {
init: function () { },
initData: function () {
var self = this;
self.items = itemData;
if (itemData.length != 0) {
self.checkValue = self.items[0].value;
self.checkId = 'food-' + self.items[0].id
}
},
setCheckValue: function (item) {
this.checkId = 'food-' + item.id;
}
,
showCheck: function () {
console.log(this.checkId)
}
},
mounted: function () {
this.initData();
}
}) </script>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta>
<title>Document</title>
<script src="../vue.js"></script>
<style>
ul, li {
list-style-type: none;
} * {
margin: 0;
padding: 0;
} .border-1px {
position: relative;
} .border-1px:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, .1);
content: ' ';
} @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
.border-1px::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
} @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
.border-1px ::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
} #example {
margin: 20px;
} h3 {
font-size: 26px;
margin-left: 20px;
height: 60px;
} .self-checkbox {
display: none;
} .self-checkbox + label {
margin-top: 16px;
-webkit-appearance: none;
background-color: #fff;
border: 2px solid #aaa;
border-radius: 5px;
display: inline-block;
position: relative;
width: 30px;
height: 30px;
box-sizing: border-box;
vertical-align: top;
} .self-checkbox:checked + label {
border: 2px #47d9bf solid;
} .self-checkbox:checked + label:after {
display: inline-block;
text-align: center;
content: '√';
width: 100%;
height: 30px;
line-height: 26px;
color: #47d9bf;
font-size: 18px;
text-shadow: 0px 0px 5px #47d9bf;
} .check-area {
display: inline-block;
width: 400px;
padding: 12px 20px;
border: 1px solid #aaa;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
} li {
height: 60px;
} li .self-radio + label {
vertical-align: middle;
} li span {
margin-left: 20px;
display: inline-block;
line-height: 60px;
font-size: 22px;
} p {
height: 60px;
line-height: 60px;
margin-left: 20px;
} p span {
color: #f00;
} .btn {
margin: 20px auto;
width: 100%;
text-align: center;
} .btn button {
width: 120px;
height: 40px;
line-height: 30px;
font-size: 16px;
color: #fff;
background: #47d9bf;
border: 1px #23d5b6 solid;
border-radius: 6px;
text-align: center;
outline: none;
} .btn button:hover {
background: #23d5b6;
}
</style>
</head> <body>
<div id="example">
<h3>多选按钮</h3>
<div class="check-area" v-show="items.length!=0">
<ul>
<li class="border-1px" v-for="(item,index) in items">
<input class="self-checkbox" type="checkbox"
:id="'checkbox-'+item.id"
:data-id="'food-'+item.id" name="radio"
:value="item.value"
v-model="checkValues"
@click="setCheckValue($event,item)">
<label :for="'checkbox-'+item.id"></label>
<span>{{item.value}}</span>
</li>
</ul>
<p>您选择了：<span v-show="checkValues.length">{{filterCheckValues}}</span></p>
<div class="btn">
<button @click="showCheck(checkIds)">按钮</button>
<span v-show="checkIds.length">{{checkIds}}</span>
</div>
</div>
</div>
<script>
var itemData = [{id: '20170811001', value: '香蕉'},
{id: '20170811002', value: '苹果'},
{
id: '20170811003',
value: '梨子'
}, {id: '20170811004', value: '葡萄'}]
//itemData = [];
var vm = new Vue({
el: '#example',
data: {
items: '',
checkValues: [],
checkIds: []
},
computed: {
filterCheckValues: function () {
var value = this.checkValues;
var reValue = '';
for (var i = 0; i < value.length; i++) {
reValue += value[i] + '、'
}
reValue = reValue.substring(0, reValue.length - 1)
return reValue;
}
},
methods: {
initData: function () {
var self = this;
self.items = itemData;
if (itemData.length != 0) {
// self.checkValues[0] = self.items[0].value;
// self.checkIds[0] = 'food-' + self.items[0].id;
}
},
setCheckValue: function (ev, item) {
var id = 'food-' + item.id;
if (ev.target.checked) {
this.checkIds.push(id);
} else if (this.checkIds.indexOf(id) > -1) {
this.checkIds.remove(id);
}
}
,
showCheck: function () {
console.log(this.checkIds)
}
},
filter: {},
mounted: function () {
this.initData();
}
})
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
</script>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
</head> <body>
<div id="example">
checkbox value bindings demo, 注： v-bind 后面的双引号，是 js 表达式，不是字串。
<br>
<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
<br>
<pre>{{ toggle }}</pre>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
toggle: '',
a: '台湾',
b: '小凡'
}
})
</script>
</body> </html>
radio样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<link rel="stylesheet" href="css/a.css">
<style>
.wrapper {
margin: 50px
} .wrapper input {
margin: 50px;
} /*input radio样式*/ input[type="radio"].style-radio {
position: relative;
width: 40px;
height: 40px;
vertical-align: middle;
background-color: #fff;
border: 1px solid #cdcdcd;
border-radius: 50%;
outline: none;
appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 50%;
cursor: pointer;
} input[type="radio"].style-radio:checked {
background-color: #ff4272;
border-color: #ff4272;
} input[type="radio"].style-radio:checked:after {
content: '';
position: absolute;
left: 7px;
top: 8px;
width: 20px;
height: 10px;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="wrapper">
<input type="radio" class="style-radio" name="way">
<input type="radio" class="style-radio" name="way">
</div> </body>
</html>
vue.单选和多选，纯css自定义单选框样式的更多相关文章
- 帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...
- radio样式的写法，单选和多选如何快速的改变默认样式，纯CSS，
一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ZH奶酪：纯CSS自定义Html中Checkbox复选框样式
原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...
- 使用checkbox实现纯CSS下拉框
在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- 纯css修改单选、复选按钮样式
只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...
- 纯 CSS 自定义多行省略：从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
- 纯css实现单选框样式
html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...
随机推荐
- Python3 函数参数
# # 常规参数 # def jiafa(a,b): # print(a+b) # # jiafa(5,6) # # # def xinxi(name,location,sex='male'): # ...
- Using ARR to setup a proxy
Install IIS Install ARR 3.0 from WebPI Open IIS management console (inetmgr), select the server node ...
- java入门---简介&简单输出小例子&开发前准备
Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出.J ...
- java stream 处理分组后取每组最大
有一个需求功能:先按照某一字段分组,再按照另外字段获取最大的那个 Map<String, HitRuleConfig> configMap = configList.parallelStr ...
- 仿造vue-resource的formdata传对象
众插件不支持同步,也是没办法的事情,具体为啥就不分析了,确实搞不懂. 一直用vue-resource的post,觉得很舒服. 然,没办法只能仿造一个,自己提供一个同步方法 几个点先摆清楚 1. .th ...
- 对C语言连等式的学习
例子如下 [pgsql@localhost soft]$ cat test1.c #include <stdlib.h> #include <stdio.h> int main ...
- 教你用Bootstrap开发漂亮的前端界面
Bootstrap介绍: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap的特点: 一.预处理脚本:虽然可以直 ...
- MySQL☞聚合函数/分组函数
分组函数(聚合函数) 1.count(*/列名): a.*:求出该数据的总条数 select count(*) from 表名 b.列名:求出该列中列名不为null的总条数 select cou ...
- javaX邮件发送
/** * * * @param mailServerHost 邮件服务器 * @param mailServerPort 端口 * @param validate 是否需要身份验证 * @para ...
- python 基础篇 06 编码 以及小知识点补充
本节主要内容: 1. is和==的区别2. 编码的问题 ⼀. is和==的区别1. id()通过id()我们可以查看到⼀个变量表⽰的值在内存中的地址 注 ----<<<在pytho ...