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 ...
随机推荐
- go学习笔记-基础类型
基础类型 布尔值 布尔值的类型为bool,值是true或false,默认为false. //示例代码 var isActive bool // 全局变量声明 var enabled, disabled ...
- LeetCode：27. Remove Element（Easy）
1. 原题链接 https://leetcode.com/problems/remove-element/description/ 2. 题目要求 给定一个整数数组 nums[ ] 和一个整数 val ...
- PIC32MZ 通过U盘在线升级 -- USB Host bootloader
了解bootloader的实现,请加QQ: 1273623966(验证填bootloader); 欢迎咨询或定制bootloader; 我的博客主页 www.cnblogs.com/geekygeek ...
- 用ServiceStack操作使用redis的问题
最近在学习Redis,查阅网上很多资料后使用SericeStack连接redis.在nuget中下载ServiceStack.Redis,主要使用到四个dll 但是运行之后会出现一堆奇怪问题:没有实现 ...
- 《剑指offer》题解
有段时间准备找工作,囫囵吞枣地做了<剑指offer>提供的编程习题,下面是题解收集. 当初没写目录真是个坏习惯(-_-)||,自己写的东西都要到处找. 提交的源码可以在此repo中找到:h ...
- jmeter使用beanshell构造参数化
1.先在本地写一个java类,用来随机生成一个数字,如: package com.jmeter.test; public class BeanShellTest { public int getRan ...
- 【Linux运维】Centos7上借助ansible搭建LVS+Keepalived
安装ansible 安装ansible: [root@localhost ~]# /etc/hosts 192.168.19.129 web129.yanglt.com web129 192.168. ...
- SQL的鸡肋：“视图”
不知道当年SQL定义者们设计视图时是出于什么样的考虑.实际效果是,视图夹在SQL指令和表之间,形成了一个三明治的结构.在这种结构下做检索,SQL指令每次都要通过视图转换,才能作用到表上.如果不 ...
- 关于c++的头文件依赖
正在看google c++编程规范,里面对头文件依赖是这么说的: 使用前置声明(forward declarations)尽量减少.h文件中#include的数量. 当一个头文件被包含的同时也引入了一 ...
- Mybatis实例教程整体说明
什么是mybatisMyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或 ...