自定义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="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>

<!-- Checbox Two -->
<!--这个样式中间有一个黑色的条，滑块会沿着它左右滑动，但是DIV元素已经使用了，所以我们需要用:before伪类创建一个新的元素。-->
<section>
<div class="checkboxTwo">
<input type="checkbox" value="1" id="checkboxTwoInput" name="" />
<label for="checkboxTwoInput"></label>
</div>
</section>

<!-- Checbox Three -->
<!--这个样式会用文本进行提示-->
<section>
<div class="checkboxThree">
<input type="checkbox" value="1" id="checkboxThreeInput" name="" />
<label for="checkboxThreeInput"></label>
</div>
</section>

<!-- Checbox Four -->
<!--这个样式就是一个圆形按钮选中与否时候变色-->
<section>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>

<!-- Checbox Five -->
<!--这个样式就可以理解为一个和原始样式相似但是我们可以自定义一个毕竟原始的很low~~-->
<section>
<div class="checkboxFive">
<input type="checkbox" value="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="last0"></option>
<option id="last1" value="last1"></option>
<option id="last2" value="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;
}
})

时间： 2024-10-07 00:49:41

自定义input的相关文章

自定义input file样式

自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none;

hadoop学习；自定义Input/OutputFormat；类引用mapreduce.mapper；三种模式

hadoop分割与读取输入文件的方式被定义在InputFormat接口的一个实现中,TextInputFormat是默认的实现,当你想要一次获取一行内容作为输入数据时又没有确定的键,从TextInputFormat返回的键为每行的字节偏移量,但目前没看到用过 以前在mapper中曾使用LongWritable(键)和Text(值),在TextInputFormat中,因为键是字节偏移量,可以是LongWritable类型,而当使用KeyValueTextInputFormat时,第一个分隔符前后

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思

自定义input[type=&quot;radio&quot;]的样式

对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: html: <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label>

自定义input file 属性

<label class="input"><input title="浏览文件" type="file" />浏览…</label><style type="text/css">.input{display: inline-block; width: 140px; height: 50px; line-height: 50px; text-align: center; overf

原生javascript自定义input[type=checkbox]效果

上文已经讲input[type=radio]的做法发布,在我做input[input=checkbox]时候,觉得会和radio做法差不多,结果是有相似之后,但也有很大不同. 不同点有 1)checkbox自带冒泡和捕获事件,结果就是点击一下包裹checkbox的label会发生两次事件,也就是checkbox选中了,然后又不选中了,所以在对label绑定事件时候,需要停止冒泡 2)选中chekbox需要使用chekbox自带的checked属性,设置该属性的选中和被选中状态,这个与radio一

自定义input文件上传 file的提示文字及样式

简单记录一下 效果图: 代码: 1 <input class="aload" type='button' value='上传附件' onClick='javascript:$("#hiddenFile").click();' /> 2 <input id='showFileName' type='text' readonly style="border: none;"/>   3 <input id='hiddenF

关于input 的选中，自定义input[type=&quot;checkbox&quot;]样式

原文 1.css 呈现   选中后 的input的样式可以用 /*背景图*/      background:url('../pc/images/archives/icon_choosed.png') no-repeat center center;  ) 代码 1 /*input 选中前的样式*/ 2 input[type="checkbox"] + label::before { 3 content: "\a0"; /*不换行空格*/ 4 display: in