Question

我看过一些类似的堆栈溢出问题，但没有一个有帮助。我有一个如下所示的文件字段：

File field

我正在尝试将浏览按钮的位置调到左侧，以便它与文本字段对齐并为其添加边框半径，使其与周围的文本字段相匹配。我无法弄清楚该怎么做。这是文件字段的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;   
}

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

尝试在文件字段内设置样式浏览按钮

1 个答案: