HTML <input> class Attribute

The class attribute on an <input> tag assigns one or more classnames to the input control. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.



A class attribute styling a text <input> element.

 .teal {border:5px dotted teal;background-color:#eafafb;}

<input type="text" value="Suzy Lee" class="teal">

Using class

The class attribute assigns one or more classnames to the <input> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the input element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


<input class="classnames">



Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling a text <input> element.
Clicking this button toggles a classname that changes the border and background colors.

 .teal {border:5px dotted teal;background-color:#eafafb;}
 .indigo {border:5px dotted #4e46e5;background-color:#edf2ff;}

<input type="text" id="myinput" value="Suzy Lee" class="teal">

<br />
<button onclick="toggle();">Toggle class</button>

  let toggle = () => {
    let element = document.getElementById("myinput");

Code explanation

Two CSS classes are defined in the <style> element.

The class attribute in <input> assigns one classname.

Repeatedly clicking the button toggles another class, changing the background and text color of the <input> button.

Browser support

Here is when class support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <input>