HTML控件篇 -- input

1. 取消input提示框及自动填充：

<input type="text" autocomplete="off" />

处理chrome下自动填充黄底样式问题：

/*input样式特殊处理*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

2. 默认input提示语兼容处理：

<input type="text" placeholder="请输入内容" />

处理低版本IE浏览器placeholder不兼容方法：

添加如下Javascript：

 $(function(){
 if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
     $('[placeholder]').focus(function() {
         var input = $(this);
         if (input.val() == input.attr('placeholder')) {
             input.val('');
             input.removeClass('placeholder');
         }
     }).blur(function() {
         var input = $(this);
         if (input.val() == '' || input.val() == input.attr('placeholder')) {
             input.addClass('placeholder');
             input.val(input.attr('placeholder'));
         }
     }).blur();
 };
 })
 function placeholderSupport() {
     return 'placeholder' in document.createElement('input');
 }

添加如下CSS：

input.placeholder{
    color:#aaaaaa;
}

3. 上传控件美化/添加手型　

通常情况下，<input type='file'>是不支持常规添加手型的效果的，即添加样式cursor:pointer;

同时，input,type=file在不同浏览器下表现的样式也是多种多样的，如下：

图片摘自kukei的《HTML之上传控件“input=file”的美化》，他的文章中清楚的说明了美化input,type=file控件，

这里就不再重复。这里要提的是，如何为input=file添加手型样式，

因为在不同的浏览器下出现各种差异，所以在浏览器上表现也不同，例如：

在IE下：如果给input加上（cursor:pointer），那么左边输入框和右边的浏览按钮都会出现鼠标移动上去有手型；

chrome下：如果给input加（cursor:pointer），那么只有右边的输入框即上图的（No file chosen）部分有手型，按钮区域则不会出现手型。

并且通常情况下，我们会对inputfile进行美化，去掉右边的输入框，所以，出现了IE下有手型，chrome下没手型的问题。一下来解决这个问题。

直接上代码（不清楚的看看kukei的美化博客）：

HTML代码：

  <div class='div-upload'>
         <input type="file">选择文件
  </div>

CSS代码：

 .div-upload {
     padding: 4px 10px;
     height: 20px;
     line-height: 20px;
     position: relative;
     cursor: pointer;
     color: #888;
     background: #fafafa;
     border: 1px solid #ddd;
     border-radius: 4px;
     overflow: hidden;
     display: inline-block;
   *display: inline;
   *zoom: 1
 }
 .div-upload input {
     position: absolute;
     font-size: 100px;
     right:;
     top:;
     opacity:;
     filter: alpha(opacity=0);
     cursor: pointer
 }
 .div-upload:hover {
     color: #444;
     background: #eee;
     border-color: #ccc;
     text-decoration: none
 }

效果：

- -!截图的时候鼠标看不见。反正是实现了。下面说一下个性css样式及原理。

这个例子中，就是在input,type=file外层套了一个div,设置position:relative;cursor:pointer(其他样式纯属喜好)

 .div-upload {
     position: relative;
     cursor: pointer;
  /*height: 20px;
     line-height: 20px;
     color: #888;
     background: #fafafa;
     border: 1px solid #ddd;
     border-radius: 4px;
     overflow: hidden;
     display: inline-block;
   *display: inline;
   *zoom: 1*/
 }

然后设置input为绝对位置，透明position:absolute;opacity: 0;filter: alpha(opacity=0);然后是个重要的:位置对其：top:0;right:0;

 .div-upload input {
     position: absolute;
     font-size: 100px;
     right:;
     top:;
     opacity:;
     filter: alpha(opacity=0);
     cursor: pointer
 }

这样，就实现了给input,type=file控件添加移动上去手型的样式。