From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/css/_colon_placeholder-shown/index.html | 200 +++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/ja/web/css/_colon_placeholder-shown/index.html (limited to 'files/ja/web/css/_colon_placeholder-shown') diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..ff139e88fc --- /dev/null +++ b/files/ja/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,200 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}
+ +

:placeholder-shown は CSS の疑似クラスは、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

+ +
/* プレイスホルダーが有効な要素を選択 */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

基本的な例

+ +

HTML

+ +
<input placeholder="何か入力してください！">
+ +

CSS

+ + + +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", 200, 60)}}

+ +

文字列があふれる場合

+ +

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

+ +

HTML

+ +
<input placeholder="宜しければ、この入力欄に何か入力してください！">
+ +

CSS

+ + + +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

結果

+ +

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

+ +

色付きのテキスト

+ +

HTML

+ +
<input placeholder="Type something here!">
+
+ +

CSS

+ + + +
input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Colored_text", 200, 60)}}

+ +

カスタマイズした入力欄

+ +

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

+ +

HTML

+ +
<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+ +

CSS

+ + + +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Customized_input_field", 200, 180)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf