Place question mark submit button inside input text 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:

 div { position: relative; top: 50%; transform: translateY(50%); } div h1 { text-align: center; margin: 0px; } div p { text-align: center; } .text { display: block; margin: 0 auto; width: 50%; padding-left: 8px; padding-right: 8px; height: 35px; } .submit { border: none; background: none; position: absolute; top: 2px; right: 0px; } 

 <div> <h1>Heading</h1> <p>Sub-Heading</p> <form> <input type="text" name="username" class="text"> <input type="submit" class="submit" value="?"> </form> </div> 

JsFiddle: https://jsfiddle.net/ea1vrume/

I have tried the following styling for the submit button, but it places it way out from where I want it to be:

.submit {
   position: absolute;
   top: 2px;
   right: 0px;
}

Answer 1

Absolute positioning will pull this off. Assign position: relative; to the parent, and I made it inline-block so that it would only wrap the content inside instead of being 100% width of the page, then position the .submit button absolutely over the text input.

 div { position: relative; top: 50%; transform: translateY(50%); } div h1 { text-align: center; margin: 0px; } div p { text-align: center; } .submit { border: none; background: none; position: absolute; top: 2px; right: 0px; } form { text-align: center; } form > div { display: inline-block; width: 50%; position: relative; } .submit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .text { width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 8px; height: 35px; } 

 <div> <h1>Heading</h1> <p>Sub-Heading</p> <form> <div> <input type="text" name="username" class="text"> <input type="submit" class="submit" value="?"> </div> </form> </div> 

Answer 2

To get the ? button inside the textbox:

• apply the style position: relative to your <form>
• apply the style right: 25% to your ? button

 div { position: relative; top: 50%; transform: translateY(50%); } div h1 { text-align: center; margin: 0px; } div p { text-align: center; } .text { display: block; margin: 0 auto; width: 50%; padding-left: 8px; padding-right: 22px; height: 35px; box-sizing: border-box; } .submit { border: none; background: none; position: absolute; top: 9px; right: 25%; } form { position: relative; } 

 <div> <h1>Heading</h1> <p>Sub-Heading</p> <form> <input type="text" name="username" class="text"> <input type="submit" class="submit" value="?"> </form> </div> 

Answer 3

See if this help https://jsfiddle.net/ea1vrume/1/

HTML

<div>
  <h1>Heading</h1>
  <p>Sub-Heading</p>
  <form>
    <input type="text" name="username" class="text">
    <input type="submit" class="submit" value="?">
  </form>
</div>

CSS:

div {
  position: relative;
  top: 50%;
  transform: translateY(50%);
  text-align: center;
}

div h1 {
  text-align: center;
  margin: 0px;
}

form {
  position: relative;
  width: 50%;
  display: inline-block;
}

div p {
  text-align: center;
}

.text {
  display: block;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  height: 35px;
}

.submit {
  border: none;
  background: none;
  position: absolute;
  top: 0;
  transform: translateY(50%);
  right: 0px;
}