Skip to main content

Styling Input of type text

Styling text input fields is a crucial aspect of web development that can significantly impact user experience.

Basic Styling​

Font and Text​

  • font-family: Sets the font of the input text.
  • font-size: Sets the size of the text.
  • color: Sets the text color.
input[type="text"] {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

Borders and Outlines​

  • border: Sets the border around the input.
  • border-radius: Rounds the corners of the input.
  • outline: Sets the focus outline.
input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

Background​

  • background-color: Sets the background color.
  • background-image: Can be used for adding icons inside the input.
input[type="text"] {
  background-color: #fff;
  background-image: url('search-icon.png');
  background-position: right;
  background-repeat: no-repeat;
}

Spacing and Dimensions​

  • padding: Adds space inside the input.
  • margin: Adds space outside the input.
  • width and height: Sets the dimensions.
input[type="text"] {
  padding: 10px;
  margin: 5px 0;
  width: 100%;
  height: 40px;
}

Advanced Styling​

Placeholder Text​

  • ::placeholder: Targets the placeholder text for styling.
input[type="text"]::placeholder {
  color: #aaa;
  font-style: italic;
}

Interactive States​

  • :hover: Styles when the mouse hovers over the input.
  • :focus: Styles when the input is focused.
  • :disabled: Styles when the input is disabled.
input[type="text"]:hover {
  border-color: #777;
}

input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Validation States​

  • :valid and :invalid: Styles based on HTML5 validation.
input[type="text"]:valid {
  border-color: green;
}

input[type="text"]:invalid {
  border-color: red;
}

Accessibility​

  • Always associate a <label> with the input using the for attribute.
  • Use ARIA attributes like aria-required for enhanced screen reader support.

Example​

Here's a complete example combining all the above:

index.html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./main.css" >
    </head>
    <body>
        <header></header>
        <form>
          <span>
              <label for="fName">First Name</label>
              <input id="fName" name="fName" pattern="[A-Za-z]{3,}" type="text" >
          </span>
        </form>
    </body>
</html>