[CSS] display プロパティを変更できない要素

テキストボックス (input 要素) やボタン (button 要素)は、 display を inline-block 以外に変更することができません。display: none にはできます。

<button>の中にテキストとアイコンを表示して、上下中央に揃えたいときなど、ボタンに display: flex や display: inline-flex を指定したくなることはありますが、残念ながらできません。

嘘のように思うかもしれませんが、残念ながら本当です。次のサンプルコードで確認することができます。

サンプルコード

<!-- とりあえず span で試してみます -->
<span>Span</span>

<!-- input -->
<input type="text" value="Input">

<!-- button も確認 -->
<button type="button">Button</button>

span,
input,
button {
  display: block; // display を block にすることで、幅 100% になることを期待
  background-color: pink; // デバッグ用に色を付けます
}

結果

デモはこちら

span の場合は幅が 100% になっているのに、input や button は幅が変化していません。

display: inline-block から変更できない要素

W3C にこのような記述があります。

When the button binding applies to a button element, the element is expected to render as an inline-block box rendered as a button whose contents are the contents of the element.

引用元: https://www.w3.org/TR/html51/rendering.html#rendering

つまり、ボタン は inline-block としてレンダリングされますということ。

このような要素をすべて挙げると以下の通りです。上のページ内を inline-block で検索しました。

• button
• input (type=image と type=hidden を除く)
• meter
• progress
• select
• textarea
• (keygen)

開発者ツールで見てみると display が変更できているように見えますが、実際には変わっていません。なお、変更できないと言っても、最初に書いた通り、display: none は設定できます。

置換要素

さらに、 置換要素 と呼ばれる要素があり、これらも CSS の扱いが特殊なので注意が必要です。「埋め込みコンテンツ」と「画像」が置換要素で、 上のリスト除外した input[type=image] も置換要素のひとつです。

置換要素一覧：

10.4 Replaced elements
10.4.1 Embedded content
10.4.2 Images
10.4.3 Attributes for embedded content and images
10.4.4 Image maps

引用元: https://www.w3.org/TR/html51/rendering.html#replaced-elements

置換要素ってなんでしょうか？ MDN には次のように書かれています。

CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。

CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがだけです。詳しい情報はコンテンツボックス内のオブジェクト位置の制御をご覧ください。

引用元: https://developer.mozilla.org/ja/docs/Web/CSS/Replaced_element

まとめると以下のようになります。

まとめ

display プロパティを変更できない要素:

• フォームコントロール系
  • button, input, meter, progress, select, textarea, keygen

CSS の扱いが特殊な要素:

• 埋め込みコンテンツ
  • embed, iframe, video, canvas, object, (applet), audio
• 画像
  • img, input[type=image], map, area

すべてのデモはこちら