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

Вызывает два элемента, один показывает путь до файла, второй элемент это кнопка для вызова окна выбора файла, и тут возникает вопрос, как для двух этих элементов сделать разные css оформления? Например для кнопки "обзор" сделать background-image?

2 ответа 2

4

Держите реализацию идеи от 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
  • 2
    Ну label же можно...
    – Qwertiy
    18 ноя 2016 в 23:02
  • @Qwertiy, согласен, можно и label.
    – Abmin
    18 ноя 2016 в 23:03
2

А никак. Тут только 1 вариант-прятать input под div и уже сам div оформлять.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 31 дек 2015 в 2:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.