css - 样式化输入类型 ="file"

标签 css

<分区>

我正在尝试对齐文本以具有与选择文件按钮相同的填充。

input[type='file'] {
    background: #000;
    border-radius: 5px;
    color: #fff;
    font-family: "Marmellata", sans-serif;
    padding: 6px 10px 14px 17px;
    font-size: 20px;
    margin-bottom: 20px;
    width: 240px;
    vertical-align: top;
    margin-top: 0px;
}
<input name="t1" class="imgupload" type="file" accept="image/*" capture="camera">

编辑:

我已经用这个方法解决了这个问题:

.select-image-btn input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        }

.select-image-btn {
        position: relative;
        overflow: hidden;
        display: inline-block;
        }

只需在上添加类名

input[type=file]

div应该是这样的

<div class="select-image-btn">
      <button class="btn default" >Upload a file</button>
      <input type="file" name="t1" accept="image/*" capture="camera">
</div>

最佳答案

为什么不使用以下内容?

input.imgupload {
background: #000;
border-radius: 5px;
color: #fff;
font-family: "Marmellata", sans-serif;
padding: 6px 10px 14px 17px;
font-size: 20px;
margin-bottom: 20px;
width: 240px
vertical-align: top;
margin-top: 0px;
}

无论如何,类比属性选择器具有更强的权重。

关于css - 样式化输入类型 ="file",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16556226/

上一篇:html - 通过透明对象显示框阴影(div)

下一篇:css - 在 Windows 8 应用程序中拖动内容超过滚动限制时如何禁用反弹?

相关文章:

html - 我的顶部栏在悬停时没有改变颜色

html - 覆盖表格行样式

html - 为什么总是出现 *ngIf 验证消息?

php - 如何使用php传递输入类型的数据

asp.net - 长 asp.net 表单的基本 html 和 css

javascript - 刷新时跳转到顶部

html - 是否可以在html中的p标签内使用form和div标签?

html - 导航栏不是全宽

css - 将 prop 传递给样式化的组件

html - 剩余空间内容独立滚动