Question

我想将图像放在文本框的开头，以便用户输入位置。

该图像称为fa-map-marker.png。这是文本框的图像：

<img src='https://i.stack.imgur.com/V6LTW.png'>

例如，用户应该能够删除整个字符串Birmingham，但不能删除或覆盖图像。

我不得不插入一个代码段，因为我无法插入嵌入式图像。

Answer 1

我在制作搜索框时遇到了这个问题。伯明翰应该是一个占位符，我将通过一些更改将代码提供给我的搜索框。我的图标具有特定的CSS代码

.searchicon {position: absolute;right: 20px;top: 0;bottom: 0;content: '';width: 25px;background: url('https://home.saxobroko.ga/images/home/searchicon.svg') left center no-repeat;} 
.trashicon {position: absolute;right: 55px;top: 0;bottom: 0;content: '';width: 25px;background: url('https://home.saxobroko.ga/images/home/trash-alt.svg') left center no-repeat;}

搜索框CSS

.sbx-google {display: inline-block;width: 500px;height: 41px;white-space: nowrap;box-sizing: border-box;font-size: 14px;}.sbx-google__wrapper {width: 100%;height: 100%;}.sbx-google__input {display: inline-block;-webkit-transition: box-shadow .4s ease, background .4s ease;transition: box-shadow .4s ease, background .4s ease;border: 0;border-radius: 4px;box-shadow: inset 0 0 0 1px #CCCCCC;background: #FFFFFF;padding: 0;padding-right: 77px;padding-left: 11px;width: 100%;height: 100%;vertical-align: middle;white-space: normal;font-size: inherit;-webkit-appearance: none;-moz-appearance: none;appearance: none;}.sbx-google__input::-webkit-search-decoration, .sbx-google__input::-webkit-search-cancel-button, .sbx-google__input::-webkit-search-results-button, .sbx-google__input::-webkit-search-results-decoration {display: none;}.sbx-google__input:hover {box-shadow: inset 0 0 0 1px #b3b3b3;}.sbx-google__input:focus, .sbx-google__input:active {outline: 0;box-shadow: inset 0 0 0 1px #3E82F7;background: #FFFFFF;}.sbx-google__input::-webkit-input-placeholder {color: #AAAAAA;}.sbx-google__input::-moz-placeholder {color: #AAAAAA;}.sbx-google__input:-ms-input-placeholder {color: #AAAAAA;}.sbx-google__input::placeholder {color: #AAAAAA;}.sbx-google__submit {position: absolute;top: 0;right: 0;left: inherit;margin: 0;border: 0;border-radius: 0 3px 3px 0;background-color: #3e82f7;padding: 0;width: 49px;height: 100%;vertical-align: middle;text-align: center;font-size: inherit;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.sbx-google__submit::before {display: inline-block;margin-right: -4px;height: 100%;vertical-align: middle;content: '';}.sbx-google__submit:hover, .sbx-google__submit:active {cursor: pointer;}.sbx-google__submit:focus {outline: 0;}.sbx-google__submit svg {width: 21px;height: 21px;vertical-align: middle;fill: #FFFFFF;}.sbx-google__reset {display: none;position: absolute;top: 10px;right: 56px;margin: 0;border: 0;background: none;cursor: pointer;padding: 0;font-size: inherit;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;fill: rgba(0, 0, 0, 0.5);}.sbx-google__reset:focus {outline: 0;}.sbx-google__reset svg {display: block;margin: 4px;width: 13px;height: 13px;}.sbx-google__input:valid ~ .sbx-google__reset {display: block;-webkit-animation-name: sbx-reset-in;animation-name: sbx-reset-in;-webkit-animation-duration: .15s;animation-duration: .15s;}@-webkit-keyframes sbx-reset-in {0% {-webkit-transform: translate3d(-20%, 0, 0);transform: translate3d(-20%, 0, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;}}@keyframes sbx-reset-in {0% {-webkit-transform: translate3d(-20%, 0, 0);transform: translate3d(-20%, 0, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;}} 
.sbx-google__input:hover, .sbx-google__input:focus {box-shadow: 0px 0px 5px #fff;}
.searchplace {position:fixed;top:2%;right:2%;}
        .glow {text-shadow: #000 0 0 10px, #000 0 0 10px, #000 0 0 10px, #000 0 0 10px, #000 0 0 10px, #000 0 0 10px}

搜索框的表单代码

<form name="cse" novalidate="novalidate" id="searchbox" action="search" method="get" class="searchplace w3-hide-small searchbox sbx-google">
<div role="search" class="sbx-google__wrapper">
<input type="text" name="q" placeholder="Search For Things" title="Search For Things" autocomplete="off" class="sbx-google__input" data-callback="YourOnSubmitFn">
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="en" />
<button type="submit" title="Submit your search query." class="searchicon sbx-google__submit"></button>
<button type="reset" title="Clear the search query." class="trashicon sbx-google__reset"></button>
</div>
</form>

html-图片进入文本框，无法删除

1 个答案: