입력 필드의 텍스트에 테두리 추가

다음은 입력 윈도우가 아닌 텍스트 자체 아래에 테두리가있는 "검색"단어를 표시하려고합니다. CSS placeholder (여기서는 How do I Add border to text in inputfield)을 사용하려고 시도했지만 작동하지 않습니다.입력 필드의 텍스트에 테두리 추가

<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />

나는 많은 나에게 수정 프로그램을 제공 할 수 있습니다 누구 이건 의무가 될 것이다 : 여기 내 입력 상자 (이 워드 프레스에 대한 검색 박스)입니다. 나는 onfocus=과 onblur=을 단지 placeholder= 대신에 가지고 있기 때문에 그것이 있다는 것을 알고있다. 텍스트 장식 : 여기

는 http://jsfiddle.net/6Gevu/14/

출처

2013-07-12 N-WS

는 CSS를 선 넣어 내 바이올린입니다 밑줄을; '검색'이라고 말하면 그 스타일이 다른 것이 될 때 제거합니다. 입력 필드에 클래스 (.underline)를 추가하고 제거하면됩니다.

출처

2013-07-12 19:17:34 Tdelang

고마워요.하지만 테두리가 있어야합니다. 하단 : 1px 단색, 텍스트 장식 : 밑줄. 나는 그것의 구체적인 것을 알고 있지만, 디자인에 의해 요구된다. –

그것은 약간의 노력이 필요하다. 아마도 이것은 당신이 찾고있는 것이다 : http://jsfiddle.net/HR5N8/406/ – Tdelang

나는 이것이 트릭,하지만 당신의 도움에 감사드립니다. 이 일을 만들기위한 추가 연구에 대한 제안이 있습니까? 자바 스크립트를 사용해야합니까? –

당신과 같이 테두리를 생성하는 :after 의사 요소를 사용할 수있다 : http://jsfiddle.net/RMJWH/

.search-border { 
    position: relative; 
    display: inline-block; 
} 
.search-border:after { 
    content: "."; 
    color: transparent; 
    position: absolute; 
    bottom: 5px; 
    left: 2px; 
    width: 238px; 
    border-bottom: 2px solid #000000; 
}

출처

2013-07-12 20:20:52

하지만 전체 상자에 아래쪽 테두리가 추가됩니다. 하단 테두리가있는 텍스트 자체가 필요합니다. –

자리 표시 자 텍스트 만 사용 하시겠습니까? 또는 또한 입력 텍스트? –

국경을 가질 수있는 유일한 방법은 '검색'텍스트 자체입니다. 따라서 자리 표시 자 텍스트 만 –

당신은 당신의 입력 상자처럼 보이도록 div에 사업부와 스타일로 입력 상자를 동봉 할 수있다. 그런 다음 입력 상자를 아래쪽 테두리 만 표시하도록합니다.

<div class="input-box"><input type="text" /></div> 

.input-box 
{ 
    /*your styles here*/ 
} 

input 
{ 
    border:0; 
    border-bottom:/*some value*/ 
}

출처

2013-07-12 20:35:51 Dolchio

입력 필드의 텍스트에 테두리 추가

답변

관련 문제