change text input border color on hit by css

Question

change text input border color on hit by css

Hello

I've this html field

<input type=text value=test id=ff>

I am using this css code to set a border

#ff{
border:1px #000 solid
}

I want to change the border color to ( red ), when I click on the field

For example: The google search field, when you hit the search field to write anything, the border will change to blue

Marat Tanalin · Accepted Answer · 2012-05-11 23:43:18Z

5

#ff:focus {border-color: #f00; }

For IE7 you can use JavaScript (jQuery in particular), for example:

<style>
    #ff:focus,
    #ff.focus {border-color: #f00; }
</style>

<!--[if lte IE 7]>
<script>
$('#ff').focus(function() {
    $(this).addClass('focus');
}).blur(function() {
    $(this).removeClass('focus');
});
</script>
<![endif]-->

edited May 11, 2012 at 23:43

answered May 11, 2012 at 23:32

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alaa Gamal Over a year ago

thank you very much, it's works fine.. but why it does not work with IE 7?? How i can use it with IE7?

Marat Tanalin Over a year ago

IE7 is too old browser and just does not support :focus pseudoclass. You can use JavaScript if needed. But given that it is not a critical functionality, it's perfectly OK to not care about IE7 in this case.

Collectives™ on Stack Overflow

change text input border color on hit by css

change text input border color on hit by css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

change text input border color on hit by css

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related