做项目总结1

1.关于select

/*选择框的下拉三角（使用背景图片替换默认的下拉三角）*/

select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border:solid1px#ccc;/*很关键：将默认的select选择框样式清除*/appearance:none;
-moz-appearance:none;
-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*/background:url("../images/select_arrow.png")no-repeat scroll right center; /*为下拉小箭头留出一点位置，避免被文字覆盖*/padding-right:14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand{display:none; }

/*如果没有用背景图片*/
select{
appearance:menulist;
-moz-appearance: menulist;
-webkit-appearance: menulist;
}

注：关于css中appearance的使用详情参见：http://www.css88.com/book/css/webkit/visual/appearance.htm

2.关于radio,checkbox的默认样式修改

/*html代码部分*/

<span class="bg_checkbox pos_r mr-5">
     <input type="checkbox" class="checkbox_input">
     <span class="checkbox_cover pos_a"></span>
</span>

/*css代码部分*/

 
 

  
  

   
   

    
    .pos_r
    
     {
   
   
  
  
  
  
    position: relative;
  
  

   
   }
   
   

    
    

     
     
     
     

    
    
   
   
  
  
 
 
 
 

  
  

   
   

   
   

    
    
   
   
   
   

    
    .mr-5
    
     {
   
   
  
  
  
  
    margin-right: .5em;
  
  

   
   }
   
   

    
    

     
     
     
     

    
    
   
   
  
  
 
 
 
 

  
  

   
   

   
   

    
    
   
   
   
   

    
    .bg_checkbox, .bg_checkbox .checkbox_input, .bg_checkbox .checkbox_cover
    
     {
   
   
  
  
  
  
    display: inline-block;
    width: 17px;
    height: 17px;
  
  

   
   }
  
  
 
 
 
 

  
  

   
   

    
    

     
     .bg_checkbox .checkbox_input
     
      {
    
    
   
   
   
   
    opacity: 0;
    display: inline-block;
    position: absolute;
    z-index: 100;
   
   

    
    }
   
   
   
   

    
    

     
     

      
      .pos_a
      
       {
     
     
    
    
    
    
 position: absolute;
    
    

     
     }
    
    
   
   
   
   
/*使用背景图片*/
.bg_checkbox .checkbox_input:checked + .checkbox_cover{ background: url(../images/gou.png) no-repeat 50%; }
.bg_checkbox .checkbox_cover { border: 1px solid #aaa; border-radius: 5px; z-index: 1; top: 50%; margin-top: -25%; left: 50%; margin-left: -25%; }
   
   
3.关于修改input中placeholder默认字体颜色
   
   

    
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

   
   
  
  
  
  

   
   4.关于html5全局属性contenteditable
  
  
  
  
contenteditable可以将任意不可编辑的标签span,div,p...转换成可编辑的text input ,password,textarea,下拉列表等标签，
  
  
你可以利用它的editableFactory对象来扩展自己所需的input type。
  
  

  
  
5.上传本地图片
  
  

  
  
/*html代码*/
  
  
<div class="upload-pic">
  
  

  
  
	<div class="ib pos_r">
     		<div class="choose_some">选择图片</div>
     		<input type="file" name="imgOne" id="imgOne" class="choose-pic" οnchange="preImg(this.id);">
	</div>

  
  
	<div class="container">
                    <!--<div class="mock">-->
                    <!--<img src="../images/Desert.jpg" alt="p"/>-->
                    <!--<p>这只是一个标题</p>-->
                    <!--<span> &times;</span>-->
                    <!--</div>-->
                    <!--<div class="mock">-->
                    <!--<img src="../images/Desert.jpg" alt="p"/>-->
                    <!--<p>这只是一个标题</p>-->
                    <!--<span> &times;</span>-->
                    <!--</div>-->
	</div>
  
  
</div>
  
  
/*css代码*/
  
  

  
  

   
   

    
    

     
     .ib
     
      {
    
    
   
   
   
   
    display: inline-block;
   
   

    
    }
    
    

     
     

      
      
      
      

     
     
    
    
   
   
  
  
  
  

   
   

    
    

    
    

     
     
    
    
    
    

     
     .pos_r
     
      {
    
    
   
   
   
   
    position: relative;
   
   

    
    }
   
   
  
  
  
  

   
   

    
    .upload_pic .choose_some
    
     {
   
   
  
  
  
  
    display: inline-block;
    width: 74px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background: #82ACDD;
    margin: 0 10px;
  
  

   
   }
  
  
  
  

   
   

    
    .upload_pic input, .goods_list input, .goods_guarantee input
    
     {
   
   
  
  
  
  
    opacity: 0;
    height: 32px;
    width: 88px;
    font-size: 0;
    top: 0;
    position: absolute;
  
  

   
   }
  
  
  
  /*js代码*/
  
  

  
  

  
  
/***将本地图片显示到浏览器上*/
function preImg(sourceId) {
    var url = getFileUrl(sourceId);
    //console.log(url);
    console.log(sourceId);
    var fileName = document.getElementById(sourceId).files;
    var container = $('#'+sourceId).parent().siblings(".container");
    var img  =new Image();
    //img.style.margin  = "0 10px";
    img.src           = url;
    var row=document.createElement("div");
    row.className="mock";
    $(container).append(row);
    $(container).css("display","block");
    $(row).append(img);
    container.css("padding", "10px 5px 0 10px");
    container.css("margin", "10px 121px");
    //console.log(fileName[0].name);
    var pic_name=fileName[0].name;
    $(row).append("<div>"+pic_name+"</div>");
    $(row).append("<span class='sm_close'>&times;</span>");
}
//点击关闭按钮，删除图片
$('.upload_pic .container').on('click','.mock .sm_close',function(){
    $(this).parent().remove();
    //如何没有图片contain容器自动隐藏
//        console.log($(".mock").length);
    var length = $(".upload_pic .container .mock").length;
    if(0 === length){
        $(".upload_pic .container").css("display","none");
    }
});