[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의 폭은 변화가 없다.

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

모든 시위 행진이 여기에 있다