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 ...
随机推荐
- 【Leetcode】413. Arithmetic Slices
Description A sequence of number is called arithmetic if it consists of at least three elements and ...
- Code First Migrations更新数据库结构（数据迁移） 【转】
注意:一旦正常后,每次数据库有变化,做如下两步: 1. Enable-Migrations 2.update-database 背景 code first起初当修改model后,要持久化至数据库中时, ...
- vs2013中将复制过来的文件或文件夹显示到解决方案管理
先将文件夹和文件复制到VS程序所在的位置,在VS2013解决方案资源管理器中找到这些文件所在的上一级文件夹,先将那个上层文件夹收缩起来,然后再点击解决方案资源管理器上的“显示所有文件”按纽,展开这个文 ...
- python中判断输入是否为数字(包括浮点数)
1.当num确定为数字后 num=123.4print(isinstance(num,float))#判断是否为浮点数 print(isinstance(num,int))#判断是否为整数 2.当nu ...
- springmvc基础篇—使用注解方式为前台提供数据
一.新建一个Controller package cn.cfs.springmvc.service; import java.util.ArrayList; import java.util.Hash ...
- 树莓派i2c功能
默认i2c是关闭的,用raspi-config 命令,会弹出一个配置框图 选择enable i2c就可以了 reboot之后 没有在/dev/目录下发现i2c-x的设备,这个时候需要做以下操作 1.添 ...
- CCF-NOIP-2018 提高组(复赛) 模拟试题(九)(2018 CSYZ长沙一中)
T1 Circle [问题描述] 小 w 的男朋友送给小 w 一个 n 个点 m 条边的图,并且刁难小 w 要她找出点数最少的正环. 小 w 不会做,于是向你求助. [输入格式] 第一行两个整数\(n ...
- 剑指offer-斐波那契数列07
题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 class Solution: def Fibonacci(self ...
- MySql数据库插入或更新报错：Cannot add or update a child row: a foreign key constraint fails
具体报错信息: Cannot add or update a child row: a foreign key constraint fails (`xxx`.`AAA`, CONSTRAINT `t ...
- Win10系统开启IIS服务步骤
原文链接:http://www.111cn.net/sys/361/93003.htm