<input type="file" name="xmlfile" id="file" class="button_silver_130" />

It calls two elements, one shows the path to the file, the second element is the button for calling the file selection window, and then the question is how to make different css designations for these two elements? For example, for the "review" button, make background-image?

    2 answers 2

    Keep implementing ideas from kemerov4anin

     function getName (str){ if (str.lastIndexOf('\\')){ var i = str.lastIndexOf('\\')+1; } else{ var i = str.lastIndexOf('/')+1; } var filename = str.slice(i); var uploaded = document.getElementById("fileformlabel"); uploaded.innerHTML = filename; } 
     .fileform { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 2px; cursor: pointer; height: 26px; overflow: hidden; padding: 2px; position: relative; text-align: left; vertical-align: middle; width: 230px; } .fileform .selectbutton { background-color: #A2A3A3; border: 1px solid #939494; border-radius: 2px; color: #FFFFFF; float: right; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; padding: 2px 6px; text-align: center; vertical-align: middle; width: 50px; } .fileform #upload{ position:absolute; top:0; left:0; width:100%; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; font-size: 150px; height: 30px; z-index:20; } .fileform #fileformlabel { background-color: #FFFFFF; float: left; height: 22px; line-height: 22px; overflow: hidden; padding: 2px; text-align: left; vertical-align: middle; width:160px; } 
     <div class="fileform"> <div id="fileformlabel"></div> <div class="selectbutton">Обзор</div> <input type="file" name="upload" id="upload" onchange="getName(this.value);" /> </div>

    • 2
      Well, the label can be ... - Qwertiy ♦
    • @Qwertiy, I agree, you can label. - Abmin Nov.

    No way. Here, only 1 option is to hide the input under the div and already make the div itself.

    • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦