Place question mark submit кнопка внутри поля ввода

Question

У меня есть поле ввода и кнопка отправки, которая выглядит как вопросительный знак из-за стилизации css. Это то, что она в настоящее время выглядит следующим образом:

Как я могу поместить знак вопроса внутри поля ввода, как это:

HTML

<div class="div"> 
    <form method="post"> 
    <input type="text" class="input"> 
    <input type="submit" value="?" class="submit"> 
    </form> 
</div> 

CSS

.div { 
    position: relative; 
    top: 50%; 
    transform: translateY(50%); 
} 

.input { 
    display: block; 
    margin: 0 auto; 
    width: 50%; 
} 

.submit { 
    background: none; 
    border: none; 
} 

JsFiddle: https://jsfiddle.net/TheCodesee/8h72tjcL/2/

Answer 1

Вы можете использовать знак вопроса в качестве фонового изображения в поле ввода с некоторыми CSS, например:

.form-input { 
    padding-right: 4rem; 
    background-image: url(your image); 
    background-repeat: no-repeat; 
    background-position: center right 1rem; 
    background-size: 2rem 2rem; 
} 

Вы, возможно, потребуется настроить число в зависимости от размера изображения конечно. Кнопка отправки может существовать, но вы хотите скрыть (через visibility или display). Таким образом, использование может все же нажать enter для отправки формы. Другой возможностью было бы автоматически отправить форму на размытие ввода.

Таким образом, вы можете избежать перемещения самой кнопки вокруг.

Answer 2

Использовать position: absolute на ваш ввод.

.div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(50%); 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.input { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 

 
.submit { 
 
    border: none; 
 
    background: none; 
 
    outline: none; 
 
    position: absolute; 
 
    top: 2px; 
 
    right: 0px; 
 
}

<div class="div"> 
 
    <form method="post"> 
 
    <input type="text" class="input"> 
 
    <input type="submit" value="?" class="submit"> 
 
    </form> 
 
</div>