onfocus for form input to change border colour?

Question

I'm trying to add a colour border to a form field when a user clicks on the field, I'm good at html and javascript, with a bit of php, but my css is actually quite poor. The code for the form etc is below. I would really appreciate if anyone could direct or help me. CODE:

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box">
<input name="q" type="text" id="q" autocomplete="on" size="56"  style="color:#ccc;" maxlength="128" id="q"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';"
onfocus="this.value=''; this.style.color = '#9933FF';"
value="Search" />
</form>

Any thoughts?

JakeParis · Accepted Answer · 2012-08-11T00:33:30.790

14

It'd probably be cleaner to add and subtract a class with the onBlur and onFocus. Then in the css class you could have:

.focus {
background: yellow;
color: #000;
border: 1px solid red;
}

Check here for more information on the border properties. (with apologies to those who hate w3schools, but it's a reasonable place for this type of reference).

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

edited Aug 11 '12 at 00:33

answered Jan 05 '11 at 21:14

JakeParis

11,056
3
42
65

Agreed with moving style and javascript possibly to includes. Sure you will take a bit more time but it will save you later lots of pain. – Ryan Christensen Jan 05 '11 at 21:16
1

Great! You could vote me up, then, or check the box next to my answer. Or why not both? – JakeParis Jan 05 '11 at 21:34
just an fyi... when I added a border to my text fields they seemed to shrink compared to the other fields in the form. I had to add `padding:1px; height:21px;` with the border so that everything stayed the same size and stuff. – gloomy.penguin Apr 07 '13 at 18:05
@gloomy.penguin, that's because the borders take up space, so when you add them, more space is being taken up. Try adding a border to the un-focused state that is the same color as the background. Then the hover will just change the color of the border, not changing the space the element uses – JakeParis Sep 24 '13 at 03:24

score 12 · Answer 2 · edited Sep 27 '12 at 18:45

12

Just use css for outline color like so:

.class {
    outline-color:#FF0;
}

edited Sep 27 '12 at 18:45

Mihai Iorga

39,330
16
106
107

answered Sep 27 '12 at 18:36

Carl-Michael Hughes

129
1
2

This is the correct answer across all browsers. See http://www.w3schools.com/cssref/pr_outline.asp ;) There is a note for IE8 support - you must specify DOCTYPE. – Jun 14 '14 at 08:06
best and the most direct answer, thanks so much – Arinzehills Apr 04 '22 at 16:56

Sotiris · Answer 3 · 2011-01-05T21:26:38.397

7

you can use the :focus pseudoclass #q:focus {border:red 1px solid;} but as you can see here http://www.quirksmode.org/css/contents.html it's not supported by ie 7 and below. To achieve cross browser compatibility you can use jquery and the following code

$('#q').focus(function() {
    $('#q').css('border','1px solid red');
});

edited Jan 05 '11 at 21:26

answered Jan 05 '11 at 21:17

Sotiris

38,986
11
53
85

Can you tell me that how do I make the input field previous border color when I click outside the input field. – SOURAV Feb 28 '15 at 10:05

score 2 · Answer 4 · answered Mar 19 '20 at 11:42

2

input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus 
{    
    border:2px solid #1b2a44;    
    outline:none;
}
.form-control{
padding:5px;
background-color:#f7f7f7;
border:1px solid red;
}

 <label>TextBox 1:</label><input type="text" class="form-control">
  <label>TextBox 2:</label> <input type="text" class="form-control">

answered Mar 19 '20 at 11:42

jykmhar123

121
4

1

please give provide some description – suresh bambhaniya Mar 19 '20 at 12:20
1

you can shortly use input:focus{ here css of outline what is used } same as you can use for select, textarea – jykmhar123 Mar 20 '20 at 04:54

score 1 · Answer 5 · answered Jul 26 '13 at 21:55

1

The answer from Carl-Michael Hughes is what finally worked for me! outline-color is the only way to set the focus "border" color. Thanks!

answered Jul 26 '13 at 21:55

Hank

1,658
12
13

score 1 · Answer 6 · answered Aug 30 '18 at 05:11

input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
    border-color: #81256f;
    box-shadow: none;
}

Use this CSS. This will do the job for you. With the above CSS i achieved the following output:

Hope this helped you :-)

Ryan Christensen · Answer 7 · 2011-01-05T23:01:13.420

0

I don't recommend using inline style like this and would even recommend wiring up the events via javascript/jquery but...

You can set background color with object.style.borderColor. Color is only the font color.

The css markup in shorthand is just 'border' or specifically if you want to set border color from css it is 'border-color'. In javascript that turns to this.style.borderColor.

edited Jan 05 '11 at 23:01

answered Jan 05 '11 at 21:15

Ryan Christensen

7,843
1
27
25

onfocus for form input to change border colour?

7 Answers7