如何將圖標放入輸入框內

Question

誰能幫我把勾號圖標放在右上角的輸入框中？
還可以顯示“字段已保存”消息和勾選圖標嗎？

更新：
如果表單在單行中包含多個輸入，那么如何在輸入框內顯示圖標？

小提琴： https://jsfiddle.net/sanadqazi/5Len09ad/1/

 .test { position: relative; }.test.fas.fa-check { position: absolute; top: 0; right: 0; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <div class="row"> <div class="col-8"> <div class="test"> <input type="text"> <i class="fas fa-check inp"></i> </div> </div> <div class="col-4"> <div class="test"> <input type="text"> <i class="fas fa-check inp"></i> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

一點點 CSS 應該可以解決這個問題。

將以下代碼片段添加到樣式表或樣式塊中。 或者，您可以直接在 HTML 元素本身上內聯應用 styles。

CSS：

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}

更新

如果表單在同一行包含多個 select 框，則必須將它們包裹在具有相對定位和內聯顯示的 div 中。

Answer 2

 .col-8, .col-4 { position: relative; }.input-container { border: solid 1px #000; border-radius: 2px; position: absolute; display: flex; align-items: center; padding: 4px; gap: 4px; }.input-container i { display: flex; justify-content: center; align-items: center; }.inp { height: 36px; line-height: 36px; } input[type="text"] { /* padding-right: 100px; */ border: none; outline: none; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <div class="row"> <div class="col-8"> <label class="input-container"> <input type="text"> <i class="fas fa-check inp"></i> <:-- <span>Field Saved</span> --> </label> </div> <div class="col-4"> <label class="input-container"> <input type="text"> <i class="fas fa-check inp"></i> <.-- <span>Field Saved</span> --> </label> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

您可以將容器元素添加到文本框並勾選圖標。 然后，可以把textbox的styles全部去掉，把類似的styles放到容器里，看起來容器本身就是一個textbox。 這樣，您可以使它看起來像文本框內的圖標（和字段保存的文本）。