From 4cb67a7b7744d036760066eefe40bf7320617846 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 19 Aug 2024 22:55:26 +0900
Subject: [PATCH] =?UTF-8?q?2023/02/24=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 files/ja/web/css/_doublecolon_file-selector-button/index.md

diff --git a/files/ja/web/css/_doublecolon_file-selector-button/index.md b/files/ja/web/css/_doublecolon_file-selector-button/index.md
new file mode 100644
index 00000000000000..366501d657373e
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_file-selector-button/index.md
@@ -0,0 +1,127 @@
+---
+title: "::file-selector-button"
+slug: Web/CSS/::file-selector-button
+l10n:
+  sourceCommit: 62c5c3f5655002f230bf0153fbdf8a883611014a
+---
+
+{{CSSRef}}
+
+**`::file-selector-button`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、{{HTMLElement("input") }} 要素の [`type="file"`](/ja/docs/Web/HTML/Element/input/file) のボタンを表します。
+
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-file-selector-button.html", "tabbed-shorter")}}
+
+## 構文
+
+```css
+selector::file-selector-button
+```
+
+## 例
+
+### 基本的な例
+
+#### HTML
+
+```html
+<form>
+  <label for="fileUpload">ファイルをアップロードしてください</label>
+  <input type="file" id="fileUpload" />
+</form>
+```
+
+#### CSS
+
+```css hidden
+form {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+```
+
+```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;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Basic_example", "100%", 150)}}
+
+`::file-selector-button` は要素全体であり、UA スタイルシートのルールと一致することを覚えておいてください。 特に、フォントや色は必ずしも `input` 要素から継承されるとは限りません。
+
+### 代替の例
+
+#### HTML
+
+```html
+<form>
+  <label for="fileUpload">ファイルをアップロードしてください</label>
+  <input type="file" id="fileUpload" />
+</form>
+```
+
+#### CSS
+
+```css hidden
+form {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+```
+
+```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;
+}
+```
+
+#### 例
+
+{{EmbedLiveSample("Fallback_example", "100%", 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebKit の CSS 拡張](/ja/docs/Web/CSS/WebKit_Extensions)
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の Firefox における対応](/ja/docs/Web/API/File_and_Directory_Entries_API/Firefox_support)
+- [`<input type="file">`](/ja/docs/Web/HTML/Element/input/file)