How to add an icon image after "Search Words"?

HTML & CSS
1

How can I add an icon/image after the words: “Search Words”?

<input id="keyword" name="keyword" value="SEARCH WORDS" style="font-size:17px" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#ffffff';}" onclick="clickclear(this, 'Enter Words')" onblur="clickrecall(this,'Enter Words')" value="" />

Any help will be appreciated. Thanks

2

You can’t, as an input element doesn’t have any children (be it elements like img or pseudo elements like ::after); it just has a value, which can only be text.

BTW, you don’t have to use JS for that placeholder functionality – you can use the HTML placeholder attribute for this.

1 Like
3

try a span element and absolute position it?

4

As @m3g4p0p said you don’t have pseudo elements for input type element and if you want the icon/image to be placed right after the text “Search Words” may not be possible.
However if you just want an image why not use it as a background image and position it to right side.

2 Likes
5

ananda has the right idea. While you can’t accomplish this trick with a pseudo element, you can do so with a combination of padding and background image.

<html>
	<head>
		<title></title>
		<style type="text/css" media="screen">
			input.test{
			   padding: .5em; 
			}
			input.test[value="SEARCH WORDS"]{
				padding-left:48px; 
				background: url(http://maps.google.com/mapfiles/kml/pal3/icon55.png) no-repeat 8px center;
			}
		</style>
	</head>
	<body>
		<input class="test" value="NOT SEARCH WORDS">
		<input class="test" value="SEARCH WORDS">
	</body>
</html>

hope that helps

6

You can use a pseudo element on the <button> element. Going that route you can use the Magnifying Glass character for your pseudo content value.

As previously mentioned though, you will get best results with a background image.

Rough example with pseudo element –

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Search Field Icon</title>

<style>

#site-search {
    display:inline-table;
    border:1px solid;
    border-radius:4px;
    padding:0;
}
input, button {
    display:table-cell;
    vertical-align:middle;
    border:0;
    padding:3px;
    border-radius:4px;
}
button {
    background:#eee;
    cursor:pointer;
    border-radius:0 4px 4px 0;
}
button:before {
    content:'\1F50D';
    font: 1.1em/0 monospace;
    padding:2px;
}

</style>
</head>
<body>

<form action="#" id="site-search" role="search">
    <input type="text" name="keyword" placeholder="Search KeyWord">
    <button type="submit"></button>
</form>

</body>
</html>
7

Good idea indeed @ananda ! Thinking about it, you could even apply the background to the ::placeholder pseudo element (being the exception I forgot), so that it disappears when you type something into the input. Like

.keyword::-webkit-input-placeholder,
.keyword::-moz-placeholder,
.keyword::-ms-input-placeholder {
   background: url('icon.png') no-repeat right center;
}

<input class="keyword" placeholder="Search words"/>

Although some browsers (IE) have implemented this as a pseudo class, where it probably won’t work. As an alternative, you might use the :placeholder-shown pseudo class to show/hide the background image, like

.keyword:placeholder-shown {
  background: url('icon.png') no-repeat right center;
}

But again, browser support varies (IE). Maybe with a combination of both you’re on the safe side though.

3 Likes
8

Wow @m3g4p0p ! I Didn’t know about this ::placeholder pseudo element, will try this myself and once I understand this will post an article on this in my blog so other can get help.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.