CSS 콘텐츠 생성 '입력' 요소 전후

CSS 콘텐츠 생성 '입력' 요소 전후

이 질문에는 이미 다음과 같은 답변이 있습니다.

입력 필드에서 의사 요소 후에 :before 또는 :fter a pseudo-element를 사용할 수 있습니까? (21개 답변)

닫힘7년 전에.

Firefox 3 및 Google Chrome 8.0에서는 다음이 예상대로 작동합니다.

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

하지만 그 요소가 그 다음과 같은 경우에는.<input>:

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

왜 제가 생각했던 것처럼 작동이 안 되는 겁니까?

와 함께:before그리고.:after해당 요소 내부의 내용 앞에 삽입할 내용을 지정합니다.)을 지정합니다.input요소에 내용이 없습니다.

예를 들어 글을 쓴다면<input type="text">Test</input>(잘못된) 브라우저는 이를 수정하고 입력 요소 뒤에 텍스트를 넣을 것입니다.

당신이 할 수 있는 유일한 방법은 모든 입력 요소를 스판이나 디브로 포장하고 CSS를 적용하는 것입니다.

사양의 예를 참조하십시오.

예를 들어, 다음 문서 조각과 스타일시트가 있습니다.

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...다음 문서 조각 및 스타일시트와 정확히 동일한 방식으로 렌더링합니다.

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

이것은 그것이 작동하지 않는 이유와 같습니다.<br>,<img>, 등()<textarea>특별한 것 같습니다.

이것은 원인이 아닙니다.input태그는 그 자체로 어떤 콘텐츠도 가지고 있지 않지만, 그들의 콘텐츠가 CSS의 범위를 벗어난다.

inputelements는 특별한 유형입니다. 이것들은 지원하지 않습니다.:pseudo등의 선택자.:before그리고.:after.

CSS에서 대체된 요소는 표현이 CSS의 범위 밖에 있는 요소입니다.이것들은 표현이 CSS와 독립적인 일종의 외부 객체입니다.일반적으로 교체되는 요소는<img>,<object>,<video>또는와 같은 요소를 형성합니다.<textarea>그리고.<input>. 어떤 요소들은, 예를 들면,<audio>아니면<canvas>특정한 경우에만 요소를 교체합니다.CSS 컨텐츠 속성을 사용하여 삽입된 개체는 익명으로 대체된 요소입니다.

이는 사양에도 언급되어 있습니다.

이 규격은 다음의 상호작용을 완전히 정의하지 않습니다.:before그리고.:after(HTML의 IMG와 같은) 요소를 대체했습니다.

그리고 보다 명확하게 다음과 같습니다.

교체된 요소가 없습니다.::before그리고.::after사이비의

이와 같은 기능이 있습니다.

input + label::after {
  content: 'click my input';
  color: black;
}

input:focus + label::after {
  content: 'not valid yet';
  color: red;
}

input:valid + label::after {
  content: 'looks good';
  color: green;
}

<input id="input" type="number" required />
<label for="input"></label>

그런 다음 플로트를 추가하거나 위치를 지정하여 물건을 주문합니다.

fyi<form>지지대들:before/:after또한, 당신이 당신의 짐을 싸면 도움이 될 것입니다.<input>그것을 가진 요소들...(그것도 디자인 문제가 있었습니다.)

태그 라벨을 사용하고 =에 대한 당사의 방법은 입력할 수밖에 없습니다.양식의 규칙을 따르고 태그와의 혼동을 피할 경우 다음을 사용합니다.

<style type="text/css">
    label.lab:before { content: 'input: '; }
</style>

또는 비교(짧은 코드):

<style type="text/css">
    div label { content: 'input: '; color: red; }
</style>

형태..

<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>

또는 비교(짧은 코드):

<div><label></label><input name="n" ...></div>

언급URL : https://stackoverflow.com/questions/4574912/css-content-generation-before-or-after-input-elements