입력 값 선택기에 CSS를 사용할 수 있습니까?

Question

입력 상자 값에 일부 텍스트를 추가하는 방법이 있습니까? 이것은 내가 노력하고있어입니다 :

http://jsfiddle.net/uuHBB/

HTML :

<div class="test"> 
    test 
</div> 
<input type="text" value="1" /> 
<input type="text" value="2" /> 

CSS : 나는 사업부에 텍스트를 추가하고, 입력 값의 색상을 변경할 수 있습니다

input[value]:before {content:"Number:";} 
input[value] {color: blue;} 
.test:before {content:"This is a ";} 

그러나 그것은 입력 값에 텍스트를 추가하는 것 같지 않습니다.

CSS로 수행 할 수없는 경우 JavaScript/jQuery 지원 솔루션을 사용하고 싶습니다.

Answer 1

replaced elements에 의사 요소를 사용할 수 없습니다. CSS does not define 이러한 요소 (이미지, 양식 컨트롤, 개체, 캔버스)의 내용으로 사용할 수 없으므로 다른 요소에 입력을 래핑하거나 가능한 경우에만 pseduo 요소 자체는 UA에 실제로 의존하는 브라우저 간 호환이 불가능합니다. 당신은 알려지지 않은 영토로 전세 내게됩니다 ..

Answer 2

:before은 요소의 내용에 적용됩니다. input 태그에는 내용이 없기 때문에 :before은 입력에 사용할 수 없습니다. div의 입력을 줄 바꿈하고 div의 CSS 규칙을 작성해야합니다.

표시 가능한 텍스트를 입력 안에 넣을 방법이 없습니다. 요소의 값에 텍스트를 추가하거나 css를 사용하여 입력 상자 위에 의사 요소를 배치하고 입력 상자의 왼쪽 채우기를 늘려 해당 요소를위한 공간을 확보 할 수 있습니다. 또는 placeholder 속성을 사용할 수도 있습니다. 또한

는 input[value] 선택이 [value]이 요소의 속성에 대한 조건을 추가하기 때문에, input 선택과 같은 요소를 의미하지만, (이 경우 input 태그)를 선택하고 무엇을 변경하지 않습니다. HTML 트리에는 별도의 'value'요소가 없으므로이를 선택할 수 없습니다.

Answer 3

왜 jQuery를 사용하지 않으시겠습니까? 그러나 CSS는 이제 해보자

프로그래밍을하지 그것은 http://codepen.io/KingRider/pen/vGXvoV

$(document).ready(function() { 
 
    for (x=0;x<$('input[value]').length;x++) { 
 
    $('input[value]:nth('+x+')').val('Number:'+ $('input[value]:nth('+x+')').val()) 
 
    } 
 
});

/* input[value]:before {content:"Number:";} */ 
 
input[value] {color: blue;} 
 
.test:before {content:"This is a ";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="test"> 
 
    test 
 
</div> 
 
<input type="text" value="1" /> 
 
<input type="text" value="2" />

[ '입력'요소 전에 CSS의 콘텐츠 생성 (의