How to cancel the blur effect of Html textbox?

Question

How to cancel the blur effect of the HTML textbox when focus on it?

<input type='text'   style="background-color:#33ccff; color:#AD8C08; border:1px solid  #ffffff; "></input>

What do you mean the "blur" effect? Are you talking about the color around the textbox that you get on focus in some browsers? — MrPiao, Nov 07 '14 at 05:09
yes the color around the text box. its give the focused look. — Azad, Nov 07 '14 at 05:11

score 2 · Accepted Answer · answered Nov 07 '14 at 05:18

2

You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.

http://jsfiddle.net/qfr8eng1/1/

HTML:

<input type="text" id="noeffect" value="look at me!"/>

CSS:

#noeffect
{
    background-color: #33ccff;
    color: #AD8C08;
    border: 1px solid #ffffff;
}

#noeffect:focus
{
    outline: none;
}

answered Nov 07 '14 at 05:18

MrPiao

688
5
19

how to use this as inline css? – Azad Nov 07 '14 at 05:22
Unfortunately, you can't. See this Stack Overflow post: http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles – MrPiao Nov 07 '14 at 05:23

score 0 · Answer 2 · answered Nov 07 '14 at 05:25

0

try it......

.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }

<input type='text' class="onfocus"></input>

answered Nov 07 '14 at 05:25

Avinash Antala

641
5
10

How to cancel the blur effect of Html textbox?

2 Answers2