From 2f058cf0373dae40da1fbf8060141b46df205e22 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 13 Jul 2021 02:36:21 +0900 Subject: Web/CSS/:placeholder-shown を更新 (#1370) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は前身となる -moz-placeholder の記事であるため削除 - 2021/06/23 時点の英語版に同期 --- .../ja/web/css/_colon_placeholder-shown/index.html | 150 ++++++--------------- 1 file changed, 39 insertions(+), 111 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html index a156a2592a..835fb611af 100644 --- a/files/ja/web/css/_colon_placeholder-shown/index.html +++ b/files/ja/web/css/_colon_placeholder-shown/index.html @@ -1,30 +1,35 @@ --- title: ':placeholder-shown' -slug: 'Web/CSS/:placeholder-shown' +slug: Web/CSS/:placeholder-shown tags: + - ':placeholder-shown' - CSS - - Experimental + - Pseudo-class - Reference + - Selector - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:placeholder-shown' + - 擬似クラス +browser-compat: css.selectors.placeholder-shown +translation_of: Web/CSS/:placeholder-shown ---
{{CSSRef}}
-

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

+

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

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

構文

+

構文

{{CSSSyntax}} -

例

+

例

-

基本的な例

+

基本的な例

+ +

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

HTML

@@ -32,92 +37,46 @@ translation_of: 'Web/CSS/:placeholder-shown'

CSS

- - -
input {
-  border: 2px solid black;
-  padding: 3px;
+
input {
+  border: 1px solid black;
+  padding: 3px;
 }
 
 input:placeholder-shown {
-  border-color: silver;
+  border-color: teal;
+  color: purple;
+  font-style: italic;
 }

 
-
結果

+
結果

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

+
{{EmbedLiveSample("Basic_example", 200, 80)}}

 
-
文字列があふれる場合

+
文字列があふれる場合

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

 
 
HTML

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

+
<input id="input1" placeholder="Name, Rank, and Serial Number">
+<br><br>
+<input id="input2" placeholder="Name, Rank, and Serial Number">

 
 
CSS

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

+
結果

 
-
結果

+
{{EmbedLiveSample("Overflowing_text", 200, 80)}}

 
-
{{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

+
HTML

 
 
<form id="test">
   <p>
@@ -135,21 +94,7 @@ input:-moz-placeholder {
   <input type="submit"/>
 </form>

 
-
CSS

-
-
+
CSS

 
 
input {
   background-color: #E8E8E8;
@@ -162,39 +107,22 @@ input.studentid:placeholder-shown {
   font-style: italic;
 }

 
-
結果

+
結果

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

 
-
仕様書

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

+
仕様書

 
-
ブラウザーの対応

+{{Specifications}}
 
-
+
ブラウザーの互換性

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

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf