<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div style="min-height:60px;padding:12px 0"> <div id="contentWrapper"> <script> window.onload = function() { ZM.init() } </script> <div class="row"> <div class="col-sm-7 col-xs-12"> <form role="form" id="fileForm" target="uploadFrame" method="post" enctype="multipart/form-data" action="loadImage.php?task=file" onsubmit="return ZM.loadImage(this)"> <div class="input-group input-group-sm"> <span class="input-group-btn"> <span class="btn btn-gray btn-file"> Browse… <input type="file" name="file" accept="image/*"> </span> </span> <input type="text" class="form-control" placeholder="Choose file" readonly> <span class="input-group-btn"> <button class="btn btn-gray" type="submit">Ok</button> </span> </div> <br /> <br /> </form> </div> </div> </div> </div> </div>

.colorBox>div { width:30px; height:30px; background:url(/pics/color.png) } #contentWrapper{ background:#fff; padding:10px 10px 0; box-shadow:3px 2px 5px rgba(0,0,0,.3); margin:20px 0} .btn-gray{ background-color:#ccc; background-image:-moz-linear-gradient(#f4f4f4,#bcbcbc); background-image:-webkit-linear-gradient(#f4f4f4,#bcbcbc); background-image:-ms-linear-gradient(#f4f4f4,#bcbcbc); border-color:#aaa; color:#000} .btn-file{ position:relative } .btn-file input[type=file]{ position:absolute; top:0; right:0; min-width:100%; min-height:100%; font-size:999px; text-align:right; filter:alpha(opacity=0); opacity:0; cursor:inherit; display:block}input[readonly]{background-color:#fff!important;cursor:text!important}

var fn = function(e) { if (!/zmore/.test(e.target.className)) { $('#dmore').hide(); } } document.addEventListener('click', fn); document.addEventListener('touchstart', fn);