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*/
} 예시
다음 예는 CSS 파일 선택기-버튼 선택기를 보여줍니다.
<!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>
<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> Firefox 웹 브라우저에서 다음과 같은 출력을 제공합니다.
예시
<!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>
<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> 이렇게 하면 Chrome에서 다음과 같은 출력이 표시됩니다.
