양식 입력 상자에 내 단추가 나타나게하는 방법

Question

시작하기 전에 다른 접근 방식을 사용할 수 있으므로 열립니다. 또한 Google 검색 어플라이언스를 사용하고 있으므로 여기에서 작업하는 요소의 클래스, ID 및 이름을 변경할 수있는 능력이 거의 없습니다.

검색 양식의 텍스트 상자 안에 'x'라는 회색 버튼을 추가하고 싶습니다.

양식 코드 :

<div class="input-append"> 
    <form name="gs" id="suggestion_form" onsubmit="return (this.q.value == '') ? false : true;" action="search" method="GET"> 
    <input name="q" onkeyup="ss_handleKey(event)" type="text" maxLength="256" autocomplete="off" value="help"/> 
     <button class="close" id="clear-button"> 
    <button name="btnG" class="btn" type="submit"> 
    .... 

나는과 같이 검색 상자에 추가 시도 :

$("input[name=q]").append('<button id="clear-button" class="close" >x</button>'); 

버튼을 표시하지 않습니다 전혀에도 불구하고 소스에 나타나는, 내가 할 수 파란 윤곽선 상자를 얻지도 않습니다.

그래서 내가 좋아하는 다른 입력 버튼에 추가 시도 :

$("button[name=btnG]").append('<button id="clear-button" class="close" >x</button>'); 

내가이 강조 않다면 다음 그냥 파란색 개요를 참조 입력 박스로 스타일링을 설정하지 않는 버튼이 나타납니다

출처.

나는 행운과,과 같이 Z- 인덱스 값을 설정하려고 :

#clear-button { 
    position:relative; 
    left: -70px; 
    z-index: 5; 
} 

input[name=q] { 
    position:relative; 
    z-index: 0; 
} 

button[name=btnG] { 
    position:relative; 
    z-index: 0; 
} 

누구는이 문제에 대한 창의적인 해결책을 가지고? 감사.

Answer 1

같은 것을 할 수있는 가장 좋은 방법은 (버튼처럼 링크 태그 보이게하기 위해 적절한 스타일 사용) 버튼으로 링크 태그를 사용하는 것입니다. 그렇지 않으면 불필요하게 지저분 해집니다.

Answer 2

이것은 출발점 일 수 있습니다. 레이아웃을 안전하게 조정해야하지만이 작업을 수행하는 데 많은 지식이 필요하지는 않습니다. 내가 제공 한 스타일을 사용하고 단순히 닫는 태그를 추가했습니다. 색상과 패딩은 스타일을보다 분명하게 만듭니다. 내가 그것을 사용

.input-append{ 
    display: inline-block; 
    background-color: red; 
    padding: 10px; 
    position: relative; 
} 

.input-append .close{ 
    position: absolute; 
    height: 10px; 
    width: 10px; 
    right: 40px; 
    top: 12px; 
    background-image: none; 
    border: none; 
} 

HTML : 당신이 제대로이 부분을 둘러싸고있는 요소가 있으면

<div class="input-append"> 
    <form name="gs" id="suggestion_form" action="search" method="GET"> 
     <input name="q" type="text" maxLength="256" autocomplete="off" value="help"/> 
     <button class="close" id="clear-button"> 
     <button name="btnG" class="btn" type="submit"> 
    </form> 
</div> 

, 당신은 회색 X.에 실제 이미지 링크로 background-image 선언에서 "없음"을 대체 할 수 없다 또한 전체 레이아웃에 따라 position:relative;을 실험 할 수도 있지만 양식의 바깥 쪽 경계를 제어 할 수 있다면 absolute이 더 잘 수행되는 경향이 있습니다.