Een placeholder effect met background-image

Door Piet Jansen op 28-06-2013 17:43 gewijzigd op 28-06-2013 17:44

949 views

Beste mensen,

Ik heb een input field, en ik heb er voor de netheid als placeholder een afbeelding voor gebruikt. I.p.v. placeholder="search" bijv., heb ik het input element een background-image gegeven. Bij focus, verdwijnt de background-image uiteraard, maar als ik er iets in typ, en vervolgens de focus weghaal, komt de background-image weer terug.

In het kort, ik wil ervoor zorgen dat ik de background-image property simpelweg als een soort placeholder kan gebruiken.

Nu ben ik wel zover gekomen dat als ik iets typ, de background-image verdwijnt, maar als ik het input veldje weer leeg maak, komt het ook niet meer terug, als het veld leeg is moet de background-image property weer actief worden.

Hier mijn code:

HTML


<input id="universalSearch" class="universalSearch" type="text" name="universalSearch" onchange="hideIcon(this);" />

CSS


input.universalSearch {
	margin-left: 0;
	padding: 8px;
	padding-right: 25px;
	width: 230px;
    background: rgba(255, 255, 255, 0.4);
	background-image: url(img/search_place_holder.png);
	background-repeat: no-repeat;
	border: 0;
	border-radius: 3px;
	font: 15px Arial;
	color: #FFF;
	transition: background 0.5s ease;
}

input.universalSearch:focus {
    background: rgba(255, 255, 255, 1.0);
	color: #222;
	transition: background 0.5s ease;	
}

Javascript


function hideIcon(self) 
		{
			self.style.backgroundImage = 'none';
		}

Mvg,
Piet

Frank Nietbelangrijk

29-06-2013 10:55 gewijzigd op 29-06-2013 11:04

Zover ik weet kan het niet met enkel css dus is een beetje javascript nodig.
hieronder een voorbeeld.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder</title>
<style>
input.placeholder:focus {
	background-color:#FFF;
	background-image:none;
}
input.placeholder {
	background-color:#3C3;
	background-image:url('inputback.png');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.placeholder').blur(function(e) {
    if($(this).val() == '')
		$(this).addClass('placeholder');
	else
		$(this).removeClass('placeholder');
  });
});
</script>
</head>
<body>
<input class="placeholder" type="text" />
</body>
</html>

Reageren

Inloggen om te reageren