input 的一些基本属性使用以及控制图形旋转

1.改变input placeholder的颜色

input::-webkit-input-placeholder{
    color: #fff;opacity:1;

}

2.当input  type='number' ,取消后面的上下控件

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

3.input type='file' 调用手机摄像头

<input type="file" accept="image/*" capture="camera">//照相机

<input type="file" accept="video/*" capture="camcorder">//摄像机

<input type="file" accept="audio/*" capture="microphone">//录音

accept属性的意思是：打开系统文件目录

capture表示的是系统所捕获的默认设备

multiple，支持多选，当支持多选时，multiple优先级高于capture

一般可以书写成：

<input type="file" accept="image/*" multiple>

4.刷新页面的按钮旋转，采用插件的方式实现的

方法一：

<script src='./js/jquery.rotate.min.js'></script>

var value = 0
$(".searchIcon").rotate({ 
   bind: 
     { 
        click: function(){
            value += 720;//点击图形旋转
            $(this).rotate({ animateTo:value})
            window.location.reload();//刷新当时页面
        }
     } 
});

方法二：

.rounding {
  animation: change 1s linear infinite;
  /* Firefox: */
  -moz-animation: change 1s linear infinite;
  /* Safari 和 Chrome: */
  -webkit-animation: change 1s linear infinite;
  /* Opera: */
  -o-animation: change 1s linear infinite;
}

5.input type="search"的提交，（以防后台接受的参数是乱码，改用post提交）

<input type="search" placeholder="搜索"   >

$('#searchInput').blur(function(){
var name = $('#searchInput').val();
console.log(name + typeof(name))
if(!name){
return false;
}

$.post("#",{name:name},function(data){

console.log(data)

}）

6.input点击边框变色

input:focus {
    border: .01rem solid #4F77AA;
    box-shadow: 0 0 .01rem #4F77AA; 
}

7.标签内容超出部分隐藏

overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/