jQuery & JavaScript

Change an input's background colour on focus and blur (jQuery and CSS)

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-10-02

Colouring the field the user is typing in helps on long forms. Older tutorials do it with jQuery's focus and blur events; today one line of CSS does the same without script. Both are shown here, with the accessibility rule that matters most: never remove the focus indicator without replacing it.

The CSS way (recommended)

input[type=text], input[type=email], input[type=password], textarea, select {
  background: #fff;
  border: 1px solid #9aa5b1;
  transition: background-color .15s ease, border-color .15s ease;
}
input:focus, textarea:focus, select:focus {
  background: #fff8db;
  border-color: #0e6a70;
  outline: 2px solid #0e6a70;
  outline-offset: 1px;
}

ASP.NET TextBox, DropDownList and other input controls render ordinary HTML elements, so these rules apply to them directly. No ids, no ClientID, no script.

The jQuery way

If you need logic, such as highlighting only fields with a certain class or toggling something elsewhere on the page, handle the events. Use a CSS class rather than inline colours so the styling stays in the stylesheet:

<style>
  .is-active { background: #fff8db; border-color: #0e6a70; }
</style>
<asp:TextBox ID="txtName" runat="server" CssClass="field" />
<asp:TextBox ID="txtEmail" runat="server" CssClass="field" TextMode="Email" />
<asp:TextBox ID="txtNotes" runat="server" CssClass="field" TextMode="MultiLine" />

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>
<script>
  $(function () {
    $(document)
      .on("focusin", ".field", function () { $(this).addClass("is-active"); })
      .on("focusout", ".field", function () { $(this).removeClass("is-active"); });
  });
</script>

focus and blur do not bubble, so they cannot be delegated from document. jQuery maps delegated focus/blur to focusin/focusout internally, but writing focusin and focusout makes the intent explicit. Delegation also covers fields added later, for example inside an UpdatePanel that refreshes.

Highlight the whole row

Often it is the label and the field together that should stand out. :focus-within matches a container when any element inside it has focus:

<style>
  .row { padding: .5rem; border-radius: 6px; }
  .row:focus-within { background: #eef6f6; }
</style>
<div class="row">
  <label for="city">City</label>
  <input id="city" type="text">
</div>

Keyboard users first

For other jQuery helpers on Web Forms controls see Get and set a TextBox value with jQuery.

Official documentation