input type = "text"의 배경으로 텍스트를 설정하는 방법은 무엇입니까?

텍스트를 배경으로 사용하는 방법 <input type="text">
텍스트는 자리 표시자가 아니어야합니다. 그러나 항상 눈에.니다.
예 :input type = "text"의 배경으로 텍스트를 설정하는 방법은 무엇입니까?

| 'from :'사용자가 여기에 날짜를 입력합니다. http://jsfiddle.net/j8SXZ/

편집 : 업데이트 된 질문 this is exactly what you're looking for로가는 자리 표시 자 텍스트를 의미하는 경우, <input type="text" placeholder="Hint Text!">

을 시도하지만 지속적인 텍스트가 필요한 경우,이 시도 될 수있다

출처

2012-09-10 Oleg Dats

"배경 텍스트"같은 것은 없습니다. 사이트의 오른쪽 상단 모서리에있는 SO 검색 창에 단어 "검색"과 같은 힌트 텍스트 유형 설정에 대해 이야기하고 있습니까? – freefaller

가능한 복제본 [CSS가있는 배경으로 텍스트를 사용하는 방법이 있습니까?] (http://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as) -the-background-with-css) – PeeHaa

자리 표시 자 텍스트를 의미합니까? – j08691

당신은 항상 사업부에 텍스트와 텍스트 필드를 포장 한 다음 텍스트 필드처럼 보이게하는 전반적인 일을 스타일 수 있습니다.

<div> 
    <label id="lead" for="from">From: </label> 
    <input id="from" type="text" /> 
</div>

그리고이 스타일 :

div { 
    background-color: white; 
    border: 2px inset; 
    cursor: auto; 
    width: 250px; 
} 
label { 
    color: gray; 
} 
input, input[type="text"], input:focus { 
    border: none; 
    outline: none; 
}

이 this JSFiddle demo 초래

그래서이 HTML을 사용하여. (크롬과 FF에서 테스트.)

편집

영업 그는 JQuery와 UI 날짜 선택기를 사용하여 찾고 나타 내기 때문에,이 솔루션은 약간 라벨과 텍스트 필드 모두를 허용하는 불통되어야 할 것이다 날짜 선택 도구가 실행됩니다. 이것은 매우 간단하며 this question에 포함되었습니다.

"포장"div : <div class="extended-textfield">에 클래스 이름을 추가하려면 HTML을 변경해야합니다. 이는 날짜 선택 도구 자체가 <div>에도 포함되어 있고 너무 일반적인 CSS 스타일로 인해 모든 종류의 불쾌한 스타일 충돌이 발생하기 때문입니다.

div의 CSS 선택자가 div.extended-textfield으로 변경됩니다.

그리고 자바 스크립트

: 데모 작업

$("#from").datepicker(); 
$("#lead").click(function() { 
    $("from").datepicker('show'); 
});

는 here입니다.

출처

2012-09-10 17:47:17

좋은 솔루션이지만 jquery ui daterange를 사용하기 때문에 저에게 효과적이지 않습니다. 텍스트 필드에 첨부됩니다. 레이블을 클릭하면 표시되지 않습니다. –

@OlegDats - 물론 작동합니다. JQuery UI 날짜 선택 도구를 사용하여 [이 업데이트 된 JSFiddle] (http://jsfiddle.net/FvqEw/3/)을보십시오. (물론 날짜 선택기의 스타일을 지정해야합니다.) [이 질문에서와 같이] 레이블에 '날짜 표시 선택기'기능을 바인딩하면됩니다 (http://stackoverflow.com/questions/1262113/). how-to-call-bind-a-jquery-datepicker-to-a-label-or-div-of-an-input-field)를 사용합니다. –

고마워, 도움이 됐어. –

UPDATE : 배경 색상에 코멘트/피드백 - http://jsfiddle.net/Debloper/j8SXZ/3/

출처

2012-09-10 17:16:07 Debloper

항상 표시되어야합니다. 또한 –

텍스트를 입력 할 경우에만 작동합니다 background : transparent; 배경을 설정할 때 작동하지 않습니다 : 녹색; http://jsfiddle.net/j8SXZ/2/ –

당신을 만족 수있는 예제의 몇 [1].

첫 번째 예는 CSS 콘텐츠를 사용합니다. 양식 요소 자체는 의사 요소를 생성하지 않기 때문에 래퍼가 필요합니다.
두 번째 예에서는 레이블의 실제 내용을 사용하여 텍스트를 제공합니다.

트릭의 핵심은 입력을 투명도가있는 배경과 비슷한 크기의 래퍼 내에서 절대 위치로 설정하여 상대 위치로 설정하여 아래에있는 내용의 바로 위에 배치되도록하고, 그것을 통해 빛날 수 있습니다.

[1] http://codepen.io/barneycarroll/pen/bizIm

출처

2012-09-10 17:46:38 Barney

input type = "text"의 배경으로 텍스트를 설정하는 방법은 무엇입니까?

답변

관련 문제