Попытка стилизовать кнопку обзора внутри поля файла

Question

Попытка стилизовать кнопку обзора внутри поля файла

Я смотрел на некоторые похожие вопросы переполнения стека, но ни один не помог. У меня есть поле файла, которое выглядит так:

Файловое поле

Я пытаюсь mvd расположение кнопки обзора слева, чтобы она совпала с текстовым полем и добавила к нему радиус границы, чтобы он соответствовал текстовому полю вокруг него. Я не могу понять, как это сделать. Вот HTML для поля файла:

<input class="field file-field" type="file" multiple="multiple"></input>

А вот и CSS:

.field {  
    float:left; 
    display:inline; 
    width:150px; 
    height:28px;padding:0 5px; 
    border-radius: 5px; 
    border: solid 1px #bfbfbf; 
    background: url(/assets/field30.png); 
    color:#575757; 
    font-size:13px;  
    margin: 0 10px 0 40px; 
    font-family: 'Roboto', sans-serif; 
    font-weight:300; 
}

.file-field {  
    width:500px; 
    border-radius: 25px;   
}

0

html css forms file-upload

Источник

user1959050 26 янв '14 в 23:37

1 ответ

Другие вопросы по тегам html css forms file-upload

user1031766 27 янв '14 в 00:19 2014-01-27 00:19 · Answer 1 · 2014-01-27 00:19

Не совсем понятно, о чем вы спрашиваете, так как мы не видим, что вы пытаетесь выровнять, но если вы удалите настройку высоты из поля и, возможно, будете использовать отступы вокруг вас, вы получите лучшие результаты:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

.field {   
    width:150px; 
    padding:5px;
    border-radius: 5px; 
    border: solid 1px #bfbfbf; 
    background: url(/assets/field30.png); 
    color:#575757; 
    font-size:13px;  
    margin: 0 10px 0 40px; 
    font-family: 'Roboto', sans-serif; 
    font-weight:300; 
}

.file-field {  
    width:500px; 
    border-radius: 25px;   
}

</style>
</head>
<body>

<form action="">
    <input class="field file-field" type="file" multiple="multiple"></input>
</form>

</body>
</html>