Help us understand the problem. What is going on with this article?

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

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

<button>の中にテキストとアイコンを表示して、上下中央に揃えたいときなど、ボタンに display: flexdisplay: 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; // デバッグ用に色を付けます
}

結果

image

デモはこちら

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

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

すべてのデモはこちら

ysds
UX/UI/Frontend designer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした