is it possible to delete the value of text box with css :focus

Question

hi, I have the following form

<form id="enter_email" method="post" action="">
        <input type="text" value="enter email" />
        <input type="image" src="images/buttons/join-now.png"  />
    </form>

I was wondering if I can delete the value that shows on the text box by just css :focus alone,

thanks

Answer 1

No, you cannot change data using CSS. You would have to use JavaScript and assign the value of the element to an empty string.

Answer 2

No you have to use script for that.

<input id="txt1" type="text" value="test value" onfocus="this.value='';" />

Answer 3

There are ways in CSS to prepend/append content to a certain element, but nothing for modifying attribute values. But, if you really want to make use of CSS for this, you can have text as a background-image to that input and just change the background on :focus.

Answer 4

It is in fact possible to change -scratch that, to add- data using CSS with the content: property However, this only works with the :before and :after pseudo-selector, allowing you for example to add a small image after external links (as wikipedia has) by stating:

a.external:after {
  content: "<img src='image.gif' />";
}

There is no way to control the content of elements any other way than usign these two pseudo-selectors so it's not much help for you, sorry.

What can be done is add a background image to the input with the text you want it to show (for username fields in login boxes this is not uncommon), and have the image removed using :focus.

-edit- Ionut G. Stan beat me to it.