CODEWITHSUNDEEP
asp.netcssgoogle-chromefocus
Mubeen
Mubeen

Reputation: 2492

How can i change focus style of textbox in chrome?

I have a text box and i have changed the style of textbox on focus.

Username: <asp:TextBox ID="UserName" runat="server" Font-Size="0.8em" class="t_box"></asp:TextBox>

Style:

.t_box
{
    width:300px;
    padding:8px 0;
    border:none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size:16px;
    line-height:20px;
    color:#454545;

}

.t_box:focus
{
    border:1px solid #383838;
    -webkit-box-shadow: 0 0 15px #383838;
    -moz-box-shadow: 0 0 15px #383838;
    box-shadow:0 0 20px #383838;
}

This is working fine in firefox but in chrom i can see only default style which is orange color at the time of focus. How can i change my focus style in chrome?

Upvotes: 2

Views: 6306

Answers (2)

dmackerman
dmackerman

Reputation: 2966

Just some additional CSS for reference:

input:focus,
textarea:focus {
  outline: 0;
 -moz-outline-style: none;
  border-color: rgba(82,168,236,.8);
}

Upvotes: 4

Joseph
Joseph

Reputation: 119867

focus does not use the border but the outline. you must zero out the outline property first before adding other styles to remove the orange outline.

Upvotes: 5

Related Questions