입력 요소 안에 아이콘을 양식에 넣습니다.

양식의 입력 요소 안에 아이콘을 어떻게 넣습니까?

Tidal Force 테마의 라이브 버전

연결 한 사이트는 CSS 트릭을 조합하여 사용합니다. 먼저 <input>요소 의 배경 이미지를 사용합니다 . 그런 다음 커서를 위로 밀기 위해을 사용합니다 padding-left.

다시 말해, 다음 두 가지 CSS 규칙이 있습니다.

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

다른 사람이 게시 한 CSS 솔루션이이를 수행하는 가장 좋은 방법입니다.

그래도 문제가 발생하면 (IE6 읽기) div 내부에 경계가없는 입력을 사용할 수도 있습니다.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

"깨끗한"것은 아니지만 이전 브라우저에서는 작동해야합니다.

배경 이미지가없는 솔루션 :

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

당신은 이것을 시도 할 수 있습니다 :

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

나는 이것이 가장 깨끗하고 깨끗한 해결책이라고 생각합니다. 요소 에 텍스트 들여 쓰기 사용input

CSS :

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML :

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

입력 안에 아이콘을 배치하는 간단하고 쉬운 방법은 아래 코드와 같이 위치 CSS 속성을 사용하는 것입니다. 참고 : 명확성을 위해 코드를 단순화했습니다.

1. 입력과 아이콘을 둘러싸는 컨테이너를 만듭니다.
2. 컨테이너 위치를 상대적으로 설정
3. 아이콘을 절대 위치로 설정하십시오. 아이콘이 주변 컨테이너를 기준으로 배치됩니다.
4. 아이콘을 컨테이너에 배치하려면 상단, 왼쪽, 하단, 오른쪽을 사용하십시오.
5. 텍스트가 아이콘과 겹치지 않도록 입력 내부에 패딩을 설정하십시오.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

위의 태그를 CSS 파일에 추가하고 지정된 클래스를 사용하십시오.

이것은 나를 위해 작동합니다 :

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

시도해보십시오 : Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

CSS에서 background 속성을 사용하십시오.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

나는 이런 상황이 있었다. 때문에 작동하지 않았습니다 background: #ebebeb;. 입력 필드에 배경을 넣고 싶었고 그 속성이 배경 이미지 상단에 지속적으로 표시되어 이미지를 볼 수 없었습니다! 그래서 나는 background재산을 재산 위로 옮기고 background-image효과가있었습니다.

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

내 경우의 해결책은 다음과 같습니다.

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

그냥 언급하는 border, padding그리고 text-align속성은 솔루션을위한 중요하지 않습니다. 방금 원래 코드를 복제했습니다.

글꼴 아이콘과 함께 사용

<input name="foo" type="text" placeholder="&#61447;">

또는

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

예를 들어 숨겨진 입력이있는 : 레이블을 사용할 수 있습니다 (아이콘이 있음).

시작할 때 입력에이 CSS 클래스를 사용한 다음 적절하게 사용자 정의하십시오.

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

이것은 다소 표준적인 형태로 작동합니다.

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>