2

I'm trying to do something like this with my field

enter image description here

I've tried:

<input type="image" class="button" src="search-button.png" title="Search..." />

And:

#search .button { float:right; margin:7px 7px 0 0; }

But I couldn't get the image to go inside, the field. So my question is how can I accomplish this? I've tried putting them both in a div, and form, also but that didn't work. I've also tried using a pseudo element. But still couldn't get it to go in.

Genzotto
  • 1,954
  • 6
  • 26
  • 45

2 Answers2

0

Using the following structure you can achieve it.

HTML

 <div class="Test"><input type="text" class="hex" maxlength="6">
<div class="newclass"><a href="#"><img src="http://www.nwea.org/warmup/sample_tests/_resources/img/css/closeX.png" /></a></div>
</div>

CSS

 .hex {
width: 406px;
height: 40px;
font-size: 1.875em;
outline: none;
background: none;
border: 3px solid black;
vertical-align: middle;
text-transform: uppercase;
padding-left: 5px;
transition: 1s;
}
.Test
{
position:relative;
width:406px;
}
.newclass
 {
height:20px;
position:absolute;
top:12px;
right:0px;
cursor:pointer;
}

FIDDLE DEMO

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
-1

Working Fiddle

.search-box,.close-icon,.search-wrapper {
  position: relative;
  padding: 10px;
}
.search-wrapper {
  width: 500px;
  margin: auto;
  margin-top: 50px;
}
.search-box {
  width: 80%;
  border: 1px solid #ccc;
  outline: 0;
  border-radius: 15px;
}
.search-box:focus {
  box-shadow: 0 0 15px 5px #b0e0ee;
  border: 2px solid #bebede;
}
.close-icon {
  border:1px solid transparent;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
   outline: 0;
   cursor: pointer;
}
.close-icon:after {
  content: "X";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #FA9595;
  z-index:1;
  right: 35px;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 2px;
  border-radius: 50%;
  text-align: center;
  color: white;
  font-weight: normal;
  font-size: 12px;
  box-shadow: 0 0 2px #E50F0F;
  cursor: pointer;
}

For Image: Please Refer: Clear icon inside input text

Community
  • 1
  • 1
Jatin
  • 3,065
  • 6
  • 28
  • 42
  • How can I do an image instead though? –  Jun 16 '14 at 02:59
  • The problem with all of those is I'm using `background: none;`, to get the clear effect. How would I go about it now? –  Jun 16 '14 at 03:05
  • Will you please create a fiddle for that.. so it would be easier to have a look.. – Jatin Jun 16 '14 at 03:06
  • if background: none; is used then How you are going to show image. – Jatin Jun 16 '14 at 03:15
  • Another issue is that if this is used on a form with any other fields, the entire form will be reset. – Stuart Jun 16 '14 at 03:17
  • Well I needed it to be transparent. Any ideas on how I'd do it? –  Jun 16 '14 at 03:19
  • I'd say it was downvoted because it didn't answer OPs question completely. – Idris Jun 16 '14 at 05:38
  • oh I see...OP is up-voting it as soon as I upload the answer and latter on other members down-vote that... it doesn't matter to me but please down-vote with precise reasons. – Jatin Jun 16 '14 at 20:53