首页 > 代码库 > 自定义input
自定义input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=checkbox]{
visibility: hidden; /*首先需要隐藏掉默认的样式*/
}
/*第一个*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease; /*ease缓动 因为要一个滑动的效果所有加上过度*/
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
/*通过css选择器简单的抄作被选中时的样式，而不用JS或JQ 下面就是选中的checkboxOne下被选中的checkbox
后的label 要注意因为我们需要一个div来做样式，所以此时input外层的div也是我们这个复选框的一员，而不是包裹着这个复选框*/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}
/*第二个*/
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
.checkboxTwo:before {
content: ‘‘;
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
}
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}
/*第三个*/
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
/*当滑块处于未选中状态时，滑块会在左侧，并且右边显示”OFF”，当点击的时候，滑块移动到右侧，左侧显示”ON”。*/
/*但是元素数量不足以让我们实现这些功能，所以我们要用:before和:after两个伪类创建两个元素，分别放置”ON”和”OFF”。*/
.checkboxThree:before {
content: ‘On‘;
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}
.checkboxThree:after {
content: ‘Off‘;
position: absolute;
top: 12px;
left: 84px;
height: 2px;
color: #ddd;
font-size: 16px;
}
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}
/*第四个*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}
/*第五个*/
/*这次我们不在需要div去做滑动条带或者外部圆圈而是让div当作我们checkbox复选框的区域*/
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}
/*我们想要复选框什么样子主要就是改变这里label的样式就可以 定义成什么就是什么*/
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}
/*既然要做个复选框我们就需要一个对号 ~~ 既然div和label都用掉了！就轮到after咯*/
.checkboxFive label:after {
opacity: 0.2;
content: ‘‘;
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*这个对号的样式做成什么样子看你心情~随你意~可以默认透明，点击后opacity变为1？也可以像这样~~*/
.checkboxFive label:hover::after {
opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}
</style>
</head>
<body>
<!--1,整理思路-->
<!--隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，-->
<!--因为当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。-->
<!--这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。-->
<!--2,根据想要的样式去决定我们需要什么-->
<!--比如我们要做一个像解锁滑块的样式，滑块选中和未选中状态会显示在的不同位置。-->
<!--当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。-->
<!--因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，！我们需要使用它们来做黑色条带和圆角！。-->
<!-- Checbox One -->
<div class="checkboxOne">
<input type="checkbox" value="http://www.mamicode.com/1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
<!-- Checbox Two -->
<!--这个样式中间有一个黑色的条，滑块会沿着它左右滑动，但是DIV元素已经使用了，所以我们需要用:before伪类创建一个新的元素。-->
<section>
<div class="checkboxTwo">
<input type="checkbox" value="http://www.mamicode.com/1" id="checkboxTwoInput" name="" />
<label for="checkboxTwoInput"></label>
</div>
</section>
<!-- Checbox Three -->
<!--这个样式会用文本进行提示-->
<section>
<div class="checkboxThree">
<input type="checkbox" value="http://www.mamicode.com/1" id="checkboxThreeInput" name="" />
<label for="checkboxThreeInput"></label>
</div>
</section>
<!-- Checbox Four -->
<!--这个样式就是一个圆形按钮选中与否时候变色-->
<section>
<div class="checkboxFour">
<input type="checkbox" value="http://www.mamicode.com/1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>
<!-- Checbox Five -->
<!--这个样式就可以理解为一个和原始样式相似但是我们可以自定义一个毕竟原始的很low~~-->
<section>
<div class="checkboxFive">
<input type="checkbox" value="http://www.mamicode.com/1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
</section>
</body>
</html>
placeholder
<!--此效果显示点击input框之后，提示内容消失。如果默认浏览器不是谷歌，则可以不用多此一举-->
<input type="text" placeholder="请输入你要输入的关键字" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入你要输入的关键字‘">
header div.search input::placeholder {
letter-spacing: 1px;
text-indent: 5px; }
一个高度不固定的div，里面的文字如何垂直居中？
因为垂直居中纠结自己好久，今天算是比较认真的看了一下，但并不是很全面。
以前设置固定高度，直接让他的div的高度和line-height相等就可以了，但是这里的line-height的100%的是这一行的文字的px，并不是他的高度。
line-height和高度一点关系都没有，所以当父元素的高度不确定自己就懵逼了，说好的万能line就不好用了，所以就看其他的属性。
大千世界，无奇不有，需要学的东西还有很多
//1.1第一种居中方式，使用定位
position: absolute;
left:50%
top:50%;
-webkit-transform: translate(-50%，-50%);
-moz-transform:translate(-50%，-50%) ;
-ms-transform:translate(-50%，-50%) ;
-o-transform:translate(-50%，-50%) ;
transform:translate(-50%，-50%) ;
//1.2第二种居中方式，针对于不规则的
.yuan {
width: 100px;
height: 100px;
border-radius: 50px;
margin: 10px auto;
<!-- 水平 -->
justify-content:center;
<!-- 垂直 -->
align-items: center;
display: flex;
img {
width: 50px;
height: 50px;
}
}
1.3一般用于img，但是会有小偏差
*{
margin:0;
padding:0;
}
div{
margin-top: 50px;
height: 210px;
line-height: 210px;
<!-- 所以解决这个小bug的方法就是设置字体大小为0，因为是基于基线进行垂直居中 -->
font-size: 0;
text-align: center;
background-color: #A2A590;
}
div img{
vertical-align: middle;
}
1.4使用表格的td属性的,老式方法，但是比较简单
div{
display:table-cell;
vertical-align:middle;
img{
vertical-align:middle;
可有可么有，上面哪一行
}
}
（2)继承父级
height: inherit; width: inherit;
<!-- 11.sass -->
1.
$color:green;//全局变量
$width:200px;//全局变量
$height:200px;//全局变量
body {
background-color:$color;//调用全局变量
}
div {
$color:yellow;//定义局部变量，全局变量$color的影子
.div {
background-color:$color;//调用局部变量
width:$width;//调用全局变量
height:$height;//调用全局变量
}
}
2.
.box {
font: {
size: 12px;
weight: bold;
}
}
3.
传多个参数值因为每一个div都需要高＆宽
@mixin size($width,$height){
width: $width;
height: $height;
}
.box-center {
@include size(500px,300px);
}
编译出来的css：
.box-center {
width: 500px;
height: 300px;
}
12.em和rem的区别
px是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。假设：你现在用的显示器上1px宽=1毫米，但我用的显示器1px宽=两毫米，那么你定义一个div宽度为100px，你显示器上看这个div是10厘米，我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。
em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。然后你人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。
另外：em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}
<html>
我大小为16px;
<p>
段落文字大小为12px(16*0.75);
<span>
我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px
</span>
</p>
</html>
Rem，上面你看到了，em相对父级，嵌套一多了算字体到底多大就很操蛋，所以有了Rem(浏览器支持还不是很理想)，他只相对html或body的字体尺寸(默认还是16px，除非你自己用font-size定义为其他)，没有了继承父级尺寸这个关系。
小练习：
$(document).ready(function () {
$("html,body").css("font-size",$(this).width()/1280*14)
});
$(window).resize(function () {
$("html,body").css("font-size",$(this).width()/1280*14);
})
/*1. word-break:break-all;只对英文起作用，以字母作为换行依据*/
/*2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据*/
<!--
使<select>中的文字居中
-->
<style>
.ui-select {
margin-top: 5%;
text-align: center;
}
.ui-select select {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 3em;
opacity: 0;
}
</style>
[html] view plain copy print?
<!--外层是boostrap。下拉框菜单 -->
<div class="row-fluid">
<div class="span12">
<div class="ui-select">
<ul class="unstyled list-group">
<li class="list-group-item" style="background-color: #59ABED;color: #ffffff">
<span id="last00" style="background-color: #59ABED;color: #ffffff"></span>
<select id="select">
<option id="last0" value="http://www.mamicode.com/last0"></option>
<option id="last1" value="http://www.mamicode.com/last1"></option>
<option id="last2" value="http://www.mamicode.com/last2"></option>
</select>
</li>
</ul>
</div>
</div>
</div>
[javascript] view plain copy print?
//选择菜单的处理方法：点击谁<span>就是谁的值；点击谁谁就隐藏，其他显示
$("#select").change(function(){
var select=$("#select").val();
switch(select)
{
case "last0":
var last0= $("#last0").text();
$("#last00").text(last0+" "+"▼");
$("#last0").hide();
$("#last1").show();
$("#last2").show();
$("#body").empty();
attendance_check.getdatelast0_sign();
break;
case "last1":
var last1= $("#last1").text();
$("#last00").text(last1+" "+"▼");
$("#last1").hide();
$("#last0").show();
$("#last2").show();
$("#body").empty();
attendance_check.getdatelast1_sign();
break;
case "last2":
var last2= $("#last2").text();
$("#last00").text(last2+" "+"▼");
$("#last2").hide();
$("#last0").show();
$("#last1").show();
$("#body").empty();
attendance_check.getdatelast2_sign();
break;
}
})
自定义input