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 ...
随机推荐
- Python自动化运维——文件内容差异对比
Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:difflib 安装:Python版本大于等于2.3系统自带 功能:对比文本之间的差异,而且支持输出可读性比 ...
- Qt Qwdget 汽车仪表知识点拆解3 进度条编写
先贴上效果图,注意,没有写逻辑,都是乱动的 这篇我来说说左侧的这个进度条的实现原理,其实更简单,哈哈哈 有一个大的widget,根据素材,我放了10个label 剩下的就是写一个函数,根据数据的不同, ...
- python QQ邮箱自动发送邮件
于初学者来讲在写发送邮件代码时常见的错误有SMTPAuthenticationError535,有点懵逼,检查用户名,密码正确就是报错, 想当年笔者也是这么过来的,现在就给大家分享一下个人经验: 一, ...
- javaX邮件发送
/** * * * @param mailServerHost 邮件服务器 * @param mailServerPort 端口 * @param validate 是否需要身份验证 * @para ...
- iOS-Hello World
尝试练习一些简单的app,能快速上手开发环境和开发流程.基础Start Developing iOS Apps (Swift)https://developer.apple.com/library/c ...
- C++学习---- virtual的三种用法
virtual用法一:多态 #include<iostream> using namespace std; class A{ public: virtual void display(){ ...
- 测试理论--branch testing and boundary testing
1 branch testing 分支测试 测试代码的所有分支 2 boundary testing 测试 程序的限制条件
- HDU 3699 A hard Aoshu Problem（暴力枚举）（2010 Asia Fuzhou Regional Contest）
Description Math Olympiad is called “Aoshu” in China. Aoshu is very popular in elementary schools. N ...
- 软件工程项目组Z.XML会议记录 2013/11/06
软件工程项目组Z.XML会议记录 [例会时间]2013年11月06日星期二21:00-22:00 [例会形式]小组讨论 [例会地点]三号公寓楼会客厅 [例会主持]李孟 [会议记录]薛亚杰 会议整体流程 ...
- 从零开始配置Jenkins（二）——常见问题及排错思路
[前言] 一年多以前就听说Jenkins了,那时知道是它可以完成自动构建,感觉蛮强大的.后来,很多人都说它很恶心.最近,公司需要搭建新的服务器,小编就负责从头开始配置并且发布部署成功每一条线每一个项目 ...