以下是一个基于css的上传文件按钮的示例代码: HTML部分:<div class= upload-btn-wrapper > <button class=
HTML部分:
<div class="upload-btn-wrapper"> <button class="btn">选择文件</button> <input type="file" name="myfile" /> </div>
CSS部分:
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; display: block; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }该代码使用一个div容器来包裹上传按钮和文件输入框。上传按钮是一个带有选择文件标签的带边框的按钮,文件输入框被隐藏并分配了绝对位置。当用户单击按钮时,文件输入框将被触发。 此代码仅使用了CSS和HTML语言,没有使用JavaScript,这使得代码更易于维护和修改。该代码为上传文件功能提供了一个美观的界面,可以轻松地在网站中使用。
粉丝
0
关注
0
收藏
0