HTML 입력 아이콘이있는 텍스트

onload를 사용할 수없는 HTML 입력 텍스트 요소가있는 웹 페이지에서 작업하고 있습니다. 현재 필드를 비활성화/활성화하는 입력 컨테이너 onclick 옆에 편집 버튼이 있습니다.HTML 입력 아이콘이있는 텍스트

<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true"> 
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">

내가 텍스트를 중복없이 입력 탭 자체에서이 아이콘을 배치 할 수있는 다른 방법이 있습니까.

img.onInput 
{ 
    position: relative; 
    left: -20px; 
}

CSS를 사용해 보았지만 텍스트가 내가 원하지 않는 아이콘 아래에 표시됩니다.

나는 Firefox에서 "google 검색"부가 기능과 같은 것을 얻으려고합니다. 그것은 단순한 입력 텍스트와 아이콘으로 가능합니까? 사전에

감사합니다 :)

업데이트 : enter image description here 내가 텍스트 입력에이 이미지처럼 버튼을합니다. 아이콘을 클릭 할 수 있으며 JavaScript 함수 onClick 이벤트를 트리거하려고합니다. 그것은 단지 이미지를 한 번 표시 누른 후없는 반복으로 설정, https://stackoverflow.com/a/6258628/2596762

출처

2013-08-29 Rahul Dabas

배경 이미지는 – mplungjan

으로 작동합니다. CSS로 배경 이미지를 넣으시겠습니까? 해당 이미지로 클릭 가능 - JS 함수 onclick을 트리거해야합니까? –

그럼 입력란의 이미지가 의미하는 바를 모르겠다. – mplungjan

당신은 배경 속성과 CSS 클래스를 작성하고 이미지의 위치를 지정할 수 있습니다

내가 찾고 있던 답을 찾을 수 패딩 속성 등을 추가하여 위치를 찾는다. 같이 당신의 CSS에 대한 그래서

, 뭔가 :

.search { 
    background: url('image.jpg') no-repeat; 
}

그런 다음 당신은 그냥 텍스트 상자의 태그에 class 속성으로 추가 :

<input type="text" name="TxtBx1" id="TxtBx1" class="search">

출처

2013-08-29 17:16:06 MattD

이 방법을 사용할 수 없습니다. MattD, clickable이 필요한 버튼입니다. img 태그를 만들어야 onClick 이벤트를 얻을 수 있습니다. –

당신은 망원경 아이콘이 되길 원하지만 텍스트 상자 안의 망원경을 클릭하면 당신의 onclick이 실행됩니까? – MattD

나는 망원경 아이콘이 뭔지 모른다. 내 코드에 [이 예제 바이올린] (http://jsfiddle.net/PJZmv/1677/)을 사용하고 있습니다. 'X'대신 .png 아이콘을 사용하고 있습니다. –

이 사용해보십시오 :

<div class="search-div"> 
<input class="search" type="text" placeholder="Search here" /> 
<a href="#"><img src="image-url" /></a></div>

을

여기에 CSS 코드 :

.search-div{ 
    border:1px; 
    border-style:solid; 
    border-color: lightgrey; 
} 
.search{ 
border:none; 
}

이 CSS는 div를 텍스트 상자처럼 보이게하고 입력 텍스트 상자의 개요를 제거합니다. 이미지 링크의 크기를 지정하고 링크 주소를 "#"에서 원하는 URL로 변경할 수도 있습니다.

출처

2014-07-02 05:01:54 Rajan471

background: url(user.gif) no-repeat scroll 7px 7px; 
    padding-left:30px;

출처

2015-10-18 11:18:26 Mohamed

일부 주석을 추가하고 거기에 코드를 던지면 안됩니다. –

HTML 입력 아이콘이있는 텍스트

답변

관련 문제