尝试在文件字段中设置浏览按钮的样式答案

【问题标题】：Trying to style browse button inside file field尝试在文件字段中设置浏览按钮的样式
【发布时间】：2014-02-17 16:40:48
【问题描述】：

我查看了一些类似的堆栈溢出问题，但没有任何帮助。我有一个看起来像这样的文件字段：

我正在尝试将浏览按钮的位置移动到左侧，使其与文本字段对齐，并向其添加边框半径，使其与周围的文本字段匹配。我不知道该怎么做。这是文件字段的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;   
}

【问题讨论】：

标签： html css forms file-upload

【解决方案1】：

不清楚您要问什么，因为我们看不到您要对齐的内容，但是如果您从字段中删除高度设置，并且可能在周围使用填充，您将获得更好的结果：

<!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>

【讨论】：