Place question mark submit button inside input field

Question

I have an input field and a submit button which looks like a question mark due to css styling. This is what it currently looks like:

How can I position the question mark inside the input field like this:

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

You could use the question mark as a background image in the input field with some CSS, eg:

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

You may need to adjust the numbers depending on your image size of course. Your submit button may still exist, but you want to hide (via visibility or display ). Thus, the use can still hit enter to submit the form. Another possibility would be to auto submit the form on input blur.

Like that, you can avoid moving the button itself around.

Answer 2

Use position: absolute on your submit input.

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