1. opacity: 0;
2. display: inline-block;
3. position: absolute;
4. z-index: 100;

1. 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預設字型顏色

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" onchange="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程式碼*/

1. display: inline-block;

1. position: relative;

1. display: inline-block;
2. width: 74px;
3. height: 32px;
4. line-height: 32px;
5. text-align: center;
6. color: #fff;
7. background: #82ACDD;
8. margin: 0 10px;

1. opacity: 0;
2. height: 32px;
3. width: 88px;
4. font-size: 0;
5. top: 0;
6. position: absolute;

/***將本地圖片顯示到瀏覽器上*/
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");
    }
});