NotJohnDoe NotJohnDoe - 3 months ago 15
CSS Question

HTML5 / CSS input field with image as submit-button inside the input field

I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.



<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>





It should look like this:

Enter image description here

Answer

There were quite a few errors in the code you pasted up above which weren't doing you any favors.

You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.

Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...

#Search {
  position: relative;
  display: inline-block;
}

input[type=text] {
  position: relative;
    width: 200px;
    height: 36px;
  box-sizing: border-box;
  border: 2px solid #4d7fc3;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  /* 40px padding to account for submit   */
  padding: 2px 40px 2px 10px; 
}
input[type=submit] {
  position:absolute;
  width: 30px;
  height: 100%;
  top: 0px;
  right: 0px;
  border: none;
  color: white;
  background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
  display: block;
  cursor: pointer;
}

Working codepen here.

Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.

Hope this helps.