cssだけで画像やファイルを選択するボタンを変える

2023-02-02

rust

back

Posted by

applemango

早速ですが完成形が下のです

ドラッグアンドドロップも対応しています

しょぼいって?、cssだけだから許して

それはともかく

cssを適用する前はこのようになっています

<input type="file">

これに下のようなcssを適用してみます

input[type="file"] {
    color: #222;
    width: 350px;
    height: 100px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 10px 0;
    padding: 38px 24px 24px 24px;
    position: relative;
}

まだtype="file"のサイズを変えてpaddingとborderを付けただけですが雰囲気が出ますね

そしてファイルを選択と出ているボタンのcssセレクターは::file-selector-buttonです

それさえ分かれば後は消すだけですね

input[type="file"]::file-selector-button {
    display: none;
}

出来ました、後はお好みでcssを追加するだけです

因みに最初の例では追加でoutlineを追加していました

input[type="file"] {
    outline: 0px solid #3498db;
    transition: outline 0.1s ease;
}
input[type="file"]:is(:active, :focus) {
    outline: 3px solid #3498db;
}

完成

<input placeholder="file" type="file">

* {box-sizing: border-box;}
input[type="file"] {
    color: #222;
    width: 350px;
    height: 100px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 10px 0;
    padding: 38px 24px 24px 24px;
}
input[type="file"]::file-selector-button {
    display: none;
}
input[type="file"] {
    outline: 0px solid #3498db;
    transition: outline 0.1s ease;
}
input[type="file"]:is(:active, :focus) {
    outline: 3px solid #3498db;
}

このドキュメントどう?