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

필드 에서 :afterCSS 의사 요소 를 사용하려고 input하지만 작동하지 않습니다. 와 함께 사용하면 span정상적으로 작동합니다.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

이것은 작동합니다 ( "buu!"다음에 "some more"앞에 스마일리를 넣습니다)

<span class="mystyle">buuu!</span>a some more

이 방법은 작동하지 않습니다. 일부 값만 빨간색으로 표시되지만 웃는 것은 없습니다.

<input class="mystyle" type="text" value="someValue">

내가 무엇을 잘못하고 있지? 다른 의사 선택기를 사용해야합니까?

참고 : span내 주변을 추가 할 수는 없습니다 input. 타사 컨트롤에 의해 생성되고 있기 때문입니다.

:after그리고 :before어떤 요소, Internet Explorer 7 및 아래에서 지원되지 않습니다.

또한 양식 요소 (입력) 및 이미지 요소 와 같은 교체 된 요소에는 사용되지 않습니다 .

다시 말해 순수한 CSS로는 불가능 합니다.

그러나 jquery 를 사용하면

$(".mystyle").after("add your smiley here");

.after의 API 문서

자바 스크립트로 콘텐츠를 추가합니다. 이것은 모든 브라우저에서 작동합니다.

:before및 :after컨테이너 내부 렌더링

<input>은 다른 요소를 포함 할 수 없습니다.

의사 요소는 컨테이너 요소에 대해서만 정의 할 수 있습니다 (또는 더 잘 말해집니다). 그들이 표현하는 방식이기 때문에 내 자식 요소로 컨테이너 자체. input다른 요소를 포함 할 수 없으므로 지원되지 않습니다. button은 다른 서브 - 소자 용기 때문이다 반면에, 또한 폼 엘리먼트는이를 지원한다.

저에게 묻는다면 일부 브라우저 가 컨테이너가 아닌 요소 에이 두 개의 의사 요소를 표시하면 버그와 비표준 준수입니다. 사양은 요소 내용에 대해 직접 이야기합니다 ...

W3C 사양

사양 을주의 깊게 읽으면 실제로 포함 요소 안에 삽입되었다고 말합니다 .

작성자는 : before 및 : after 유사 요소를 사용하여 생성 된 컨텐츠의 스타일과 위치를 지정합니다. 이름에서 알 수 있듯이 : before 및 : after 유사 요소는 요소의 문서 트리 내용 전후에 내용의 위치를 ​​지정합니다. 이러한 의사 요소와 함께 'content'속성은 삽입되는 내용을 지정합니다.

보다? 요소의 문서 트리의 내용 . 내가 이해하는 것처럼 이것은 컨테이너 내부를 의미 합니다.

이상하게도 일부 유형의 입력에서 작동합니다. 적어도 Chrome에서는

<input type="checkbox" />

잘 작동합니다

<input type="radio" />

그것은 type=text작동하지 않는 단지 다른 것입니다.

다음은 또 다른 접근 방식입니다 (HTML을 제어한다고 가정). <span></span>입력 바로 뒤에 빈 내용을 추가하고 CSS를 사용하여 대상을 지정하십시오.input.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

AngularJS 에서이 접근법을 사용하고 있습니다. .ng-invalid클래스가 <input>아닌 요소와 양식 에 클래스를 자동으로 추가하기 때문입니다 <label>.

:before그리고 :after만약 종료 태그 요소를 사용할 수 있다는 것을 의미 용기의 내부에 도포된다.

자체 결산 요소에는 적용되지 않습니다.

참고로, 자체 결산 (예 : img / hr / input) 요소는 각각의 내용으로 대체되므로 '대체 요소'라고도합니다. 더 나은 용어가없는 "외부 개체" 더 나은 여기를 읽으 십시오

background-image필수 필드에 빨간색 점을 만드는 데 사용했습니다 .

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Codepen에서보기

입력 요소에는 의사 요소를 넣을 수 없지만 자리 표시 자처럼 그림자 요소를 넣을 수 있습니다!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

그것은 다른 브라우저 사용에 작동하도록하기 위해 :-moz-placeholder, ::-moz-placeholder그리고 :-ms-input-placeholder 다른 선택기에 . 브라우저가 선택기를 인식하지 못하면 전체 명령문이 무효화되므로 선택기를 그룹화 할 수 없습니다.

업데이트 : 위의 코드는 전처리기를 사용하지 않고 CSS 전 처리기 (SASS, LESS ...)에서만 작동합니다.

input[type="text"]::-webkit-input-placeholder:before { // your code }

의사 요소처럼 :after, :before컨테이너 요소 만 있습니다. 출발과 같은 단일 위치에서 폐쇄 요소 <input/>, <img>등 컨테이너 엘리먼트 따라서 의사 요소는 지원되지 아니다. 의사 요소를 컨테이너 요소에 적용 <div>하고 코드를 검사하면 (이미지 참조) 의미하는 바를 이해할 수 있습니다. 실제로 의사 요소는 컨테이너 요소 내에 작성됩니다. <input>또는의 경우에는 불가능합니다<img>

순수한 CSS에서 작동하는 솔루션 :

트릭은 텍스트 필드 뒤에 dom 요소가 있다고 가정하는 것입니다.

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) 제한적인 솔루션 :

• 다음과 같은 돔 요소가 있기를 바랍니다.
• 입력 필드 뒤에 다른 입력 필드가 없어야합니다.

그러나 대부분의 경우 우리는 코드를 알고 있으므로이 솔루션은 효율적이고 100 % CSS 및 0 % jQuery처럼 보입니다.

나는 같은 문제가 발생했을 때이 게시물을 찾았습니다. 이것은 저에게 효과적이었습니다. 입력 값을 바꾸는 대신 입력을 제거하고 동일한 크기의 범위를 절대로 배치하는 대신, 범위는 :before선택한 아이콘 글꼴로 의사 클래스를 적용 할 수 있습니다.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

여기에 가장 큰 오해는 단어의 의미 before와 after. 그들은 할 수 없습니다 요소 자체를 참조하지만,에 대한 내용 요소이다. 그래서 element:before컨텐츠 전에이며,element:after 컨텐츠 이후이지만, 모두 원래의 요소 내에 여전히.

input요소는 CSS보기에는 내용이 없습니다, 그래서가 아니 :before거나 없습니다:after 의사의 콘텐츠. 이것은 많은 다른 공극 또는 대체 요소에 해당됩니다.

요소 외부를 참조하는 의사 요소가 없습니다 .

다른 우주에서, 이러한 의사 요소들은이 구별을 더 명확하게하기 위해 다른 것으로 불려 졌을 수도 있습니다. 그리고 누군가는 실제로 요소 바깥에있는 의사 요소를 제안했을 수도 있습니다. 지금까지이 우주에서는 그렇지 않습니다.

CSS 2.1 스펙 의 메모 에 따르면 ,이 스펙은 대체 된 요소 (예 : HTML의 IMG)와 : before 및 : after의 상호 작용을 완전히 정의하지 않습니다. 이는 향후 사양에서 더 자세히 정의 될 것입니다.” 하지만 input정말 어떤 더, 기본적인 상황이 변경되지 않은 대체 요소되지 않습니다 :의 효과 :before와:after 일반적으로 지정되지 않은에서 거기에 아무 효과가 없습니다.

해결책은이 방법으로 해결하려는 문제에 대한 다른 접근법을 찾는 것입니다. 생성 된 콘텐츠를 텍스트 입력 컨트롤에 넣는 것은 매우 오해의 소지가 있습니다. 사용자에게는 컨트롤의 초기 값의 일부인 것처럼 보이지만 수정할 수는 없습니다. 그러나 양식 데이터의 일부로 제출되지는 않았습니다.

다른 사람들이 설명했듯이 inputs는 대체 된 void 요소이므로 대부분의 브라우저는 생성 ::before하거나 생성 할 수 없습니다::after 요소 의사 요소 .

그러나 CSS Working Group은 명시 적으로 허용 ::before하고 ::after있는 경우를 고려 하고 input있습니다 appearance: none.

에서 https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Safari와 Chrome은 모두 양식 입력에 의사 요소를 허용합니다. 다른 브라우저는 그렇지 않습니다. 우리는 이것을 제거하려고 시도했지만 사용 카운터는 그것을 사용하는 페이지의 ~ .07 %를 기록하고 있습니다. 이는 최대 제거 임계 값의 20 배입니다.

실제로 입력에 의사 요소를 지정하려면 입력의 내부 구조를 적어도 어느 정도 지정해야하지만 아직 관리하지 않은 것입니다. 그러나 보리스는 버그 스레드 중 하나에서 다음과 같이 표현할 수 있다고 제안했다. 아무 입력도 없다.

다음 시도 :

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

이전 또는 이후 의사 요소를 사용하려면 입력 주위에 일종의 래퍼가 있어야합니다. 다음은 입력의 래퍼 div에 이전이 있고 이전에 입력 내부를 배치하는 바이올린입니다. 분명히 이것은 해결 방법이지만 꼬집음에 효과적이며 스스로 반응합니다. 다른 내용을 넣어야 할 경우 쉽게 만들 수 있습니다.

일 바이올린

의사 요소로 입력 내부의 달러 기호 : http://jsfiddle.net/kapunahele/ose4r8uj/1/

HTML :

<div class="test">
    <input type="text"></input>
</div>

CSS :

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

: before 및 : after로 입력 요소의 스타일을 지정하려는 경우 CSS 범위의 다른 범위, div 또는 요소의 효과 를 모방 하려고 할 가능성이 있습니다 .

Robert Koritnik의 답변에서 지적했듯이 : before 및 : after는 컨테이너 요소 에만 적용 할 수 있으며 입력 요소는 컨테이너가 아닙니다.

그러나 HTML 5 는 컨테이너 인 button 요소를 도입했으며 input [type = "submit | reset"] 요소처럼 동작합니다.

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

요약

작동하지 않지만 <input type="button">잘 작동합니다 <input type="checkbox">.

피들 : http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

:before그리고 :after그들 만이 첫 번째 또는 마지막 노드로 새로운 노드를 삽입하기 때문에 자식 노드를 가질 수있는 노드 작동합니다.

나는 당신이 다음과 같이 할 수 있음을 발견했습니다 :

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

패딩과 : after를 취하는 div 부모가 필요합니다. 첫 번째 부모는 상대적이어야하고 두 번째 div는 절대적이어야하므로 후자의 위치를 ​​설정할 수 있습니다.

대신 다른 아이디어를 사용하십시오.

<div>
<input type="text"></input>text can be entered here</div>