Đặt biểu tượng bên trong phần tử đầu vào trong một biểu mẫu

Làm cách nào để đặt biểu tượng bên trong phần tử nhập của biểu mẫu?

Phiên bản trực tiếp tại: chủ đề Tidal Force

Trang web bạn liên kết sử dụng kết hợp các thủ thuật CSS để thực hiện điều này. Đầu tiên, nó sử dụng một hình ảnh nền cho <input>phần tử. Sau đó, để đẩy con trỏ qua, nó sử dụng padding-left.

Nói cách khác, họ có hai quy tắc CSS này:

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

Các giải pháp CSS được đăng bởi những người khác là cách tốt nhất để thực hiện điều này.

Nếu điều đó sẽ cung cấp cho bạn bất kỳ vấn đề nào (đọc IE6), bạn cũng có thể sử dụng đầu vào không biên giới bên trong div.

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

Không phải là "sạch", nhưng nên hoạt động trên các trình duyệt cũ hơn.

Một giải pháp không có ảnh nền:

#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>

Bạn có thể thử điều này:

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

Tôi thấy đây là giải pháp tốt nhất và sạch nhất cho nó. Sử dụng văn bản thụt vào inputphần tử

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" />

Cách đơn giản và dễ dàng để định vị Biểu tượng bên trong đầu vào là sử dụng thuộc tính CSS vị trí như được hiển thị trong mã bên dưới. Lưu ý: Tôi đã đơn giản hóa mã cho mục đích rõ ràng.

1. Tạo các thùng chứa xung quanh đầu vào và biểu tượng.
2. Đặt vị trí thùng chứa là tương đối
3. Đặt biểu tượng là vị trí tuyệt đối. Điều này sẽ định vị biểu tượng liên quan đến container xung quanh.
4. Sử dụng một trong hai bên trên, bên trái, dưới cùng, bên phải để định vị biểu tượng trong thùng chứa.
5. Đặt phần đệm bên trong đầu vào để văn bản không chồng lên biểu tượng.

#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;
}

thêm các thẻ ở trên vào tệp CSS của bạn và sử dụng lớp được chỉ định.

Điều này làm việc cho tôi:

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>

Bạn có thể thử điều này: 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>

Chỉ cần sử dụng thuộc tính nền trong CSS của bạn.

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

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

Tôi đã có tình huống như thế này. Nó không hoạt động vì background: #ebebeb;. Tôi muốn đặt nền trên trường đầu vào và thuộc tính đó liên tục hiển thị trên đỉnh của hình nền và tôi không thể nhìn thấy hình ảnh! Vì vậy, tôi đã chuyển backgroundtài sản lên trên background-imagetài sản và nó đã hoạt động.

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;
}

Giải pháp cho trường hợp của tôi là:

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;
}

Chỉ cần đề cập đến, border, paddingvà text-alignthuộc tính không quan trọng cho các giải pháp. Tôi chỉ sao chép mã gốc của tôi.

Sử dụng với biểu tượng phông chữ

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

HOẶC LÀ

<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>

Ví dụ: bạn có thể sử dụng cái này: nhãn với đầu vào ẩn (biểu tượng hiện diện).

sử dụng lớp css này cho đầu vào của bạn khi bắt đầu, sau đó tùy chỉnh cho phù hợp:

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

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

Điều này làm việc cho tôi cho các hình thức tiêu chuẩn nhiều hay ít:

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