::file-selector-button
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Phần tử giả CSS ::file-selector-button đại diện cho nút của <input> có type="file".
Try it
input {
margin-top: 1rem;
}
input::file-selector-button {
font-weight: bold;
color: dodgerblue;
padding: 0.5em;
border: thin solid grey;
border-radius: 3px;
}
<label for="avatar">Choose a profile picture:</label><br />
<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />
Cú pháp
css
::file-selector-button {
/* ... */
}
Ví dụ
Ví dụ cơ bản
HTML
html
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload" />
</form>
CSS
css
input[type="file"]::file-selector-button {
border: 2px solid #6c5ce7;
padding: 0.2em 0.4em;
border-radius: 0.2em;
background-color: #a29bfe;
transition: 1s;
}
input[type="file"]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
Kết quả
Lưu ý rằng ::file-selector-button là một phần tử hoàn chỉnh, và do đó khớp với các quy tắc từ UA stylesheet. Đặc biệt, font và màu sắc sẽ không nhất thiết kế thừa từ phần tử input.
Ví dụ dự phòng
HTML
html
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload" />
</form>
CSS
css
input[type="file"]::file-selector-button {
border: 2px solid #6c5ce7;
padding: 0.2em 0.4em;
border-radius: 0.2em;
background-color: #a29bfe;
transition: 1s;
}
input[type="file"]::-ms-browse:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type="file"]::-webkit-file-upload-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type="file"]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |