'input'요소 앞뒤의 CSS 컨텐츠 생성

'input'요소 앞뒤의 CSS 컨텐츠 생성 [중복]

---

이 질문에는 이미 답변이 있습니다.

• 입력 필드에서 : before 또는 : after 유사 요소를 사용할 수 있습니까? 답변 20 개

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>(잘못) 쓰면 브라우저가이를 수정 하고 입력 요소 뒤에 텍스트를 넣습니다 .

당신이 할 수있는 유일한 것은 span 또는 div의 모든 입력 요소를 감싸고 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 범위를 벗어난 것입니다 .

input요소라는 특별한 유형 replaced elements이 지원하지 않는, :pseudo같은 선택기를 :before하고 :after.

CSS에서 대체 된 요소는 표현이 CSS 범위를 벗어난 요소 입니다 . 이것들은 표현이 CSS와 무관 한 일종의 외부 객체입니다. 일반적인 대체 요소는 <img>, <object>, <video>또는 같은 폼 요소 <textarea>와 <input>. 특정 경우에만 <audio>또는 같은 일부 요소 <canvas>는 대체 요소입니다. CSS 내용 속성을 사용하여 삽입 된 객체는 익명으로 대체 된 요소입니다.

이것은 스펙 에서도 언급됩니다 .

이 사양은 대체 된 요소 (예 : HTML의 IMG)와의 상호 작용 :before및 상호 작용을 완전히 정의하지는 않습니다 :after.

그리고 더 명확하게 :

대체 요소가없는 ::before및 ::after의사 요소

---

이런 식으로 작동합니다 :

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

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

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

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

그런 다음 물건을 주문하기 위해 부유물이나 위치를 추가하십시오.

JSBin 코드 .

---

fyi <form>지원 :before/ 요소 :after를 감싸면 도움이 될 수 있습니다 <input>... (나 자신도 디자인 문제를 겪습니다)

---

태그 레이블을 사용하면 =에 대한 메소드 가 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