数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究带有 ::file-selector-button 选择器的文件上传按钮的 CSS 样式
我们可以使用 CSS 伪元素 ::file-selector-button 设置文件上传按钮的样式。但是，此伪元素仅在 Firefox 和 Firefox Android 中得到完全支持。::-webkit-file-upload-button 用于支持 Safari、Chrome 和 Opera。
语法
CSS 文件选择器属性的语法如下 −
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
}
带有 ::file-selector-button 的样式文件上传按钮
以下示例说明了 CSS 文件选择器按钮选择器。在 hover 时，我们已经这样设置了样式 −
input[type=file]::file-selector-button:hover {
cursor: grab;
background-color: blueviolet;
color: white;
font-size: 1.2em;
box-shadow: inset 5px 10px 10px cornflowerblue;
}
注意 cursor 属性 −
cursor: grab;
示例
让我们看一个使用 ::file-selector-button 对文件上传按钮设置样式的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: grab;
background-color: blueviolet;
color: white;
font-size: 1.2em;
box-shadow: inset 5px 10px 10px cornflowerblue;
}
</style>
</head>
<body>
<h1>Upload</h1>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="Random Text here" />
<button type="submit">Done</button>
</form>
</body>
</html>
使用 ::-webkit-file-selector-button 设置文件上传按钮的样式
我们已经使用 ::-webkit 前缀设置了文件上传按钮的样式。它是 Web 浏览器利用的渲染引擎，用于解释和显示 CSS 和 HTML −
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
注意 cursor 属性 −
cursor: pointer;
示例
我们看看一个使用 ::-webkit-file-selector-button 设置文件上传按钮样式的示例
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
</style>
</head>
<body>
<h1>Upload</h1>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="using webkit prefix" />
<button type="submit">Done</button>
</form>
</body>
</html>
更新于: 2023 年 10 月 31 日
2K+ 浏览量
广告