表单控件美化：自定义表单控件的显示效果

风雨恋逍遥

于 2020-07-10 18:52:50 发布

阅读量304

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.youkuaiyun.com/fylxy000/article/details/107260864

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用CSS隐藏原始input元素并自定义文件上传按钮样式的技巧。通过将input设置为不可见，并利用相邻元素选择器，可以创建一个具有背景色、文字颜色、宽度、内边距、文本居中、圆角和字母间距的美观上传按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：隐藏input元素，通过其他标签定义自己想要的样子

input{
    display: none;
}
input[type="file"] + div{
    background: fuchsia;
    color: #fff;
    width: 200px;
    padding: 10px 30px;
    text-align: center;
    border-radius: 10px;
    letter-spacing: 5px;
}

<form action="">
    <label>
        <input type="file">
        <div>文件上传</div>
    </label>
</form>

效果图：