Home >Web Front-end >CSS Tutorial >How to use the :focus pseudo-class selector to change the style of form elements

How to use the :focus pseudo-class selector to change the style of form elements

WBOYOriginal: 2023-11-20 12:41:091692browse

How to use:focus pseudo-class selector to change the style of form elements

Introduction:

In our web design, form elements are common Interactive components, users can interact with web pages through form elements. In order to improve the user experience and interface aesthetics, we often need to change the style of form elements when users interact with them. This article will introduce how to use the :focus pseudo-class selector to change the style of form elements and provide specific code examples.

1. What is the :focus pseudo-class selector?

:focus is a pseudo-class selector in CSS3, which is used to select the element that currently has focus. When the user clicks or switches focus via the Tab key, the :focus pseudo-class selector will take effect. With the :focus pseudo-class selector, we can style form elements differently to reflect whether they currently have focus.

2. How to use: focus pseudo-class selector?

Here are some common form elements and what they can be used for: focus pseudo-class selector:

Input element:

input:focus {
  /* 设置表单元素获取焦点时的样式 */
}

textarea element:

textarea:focus {
  /* 设置表单元素获取焦点时的样式 */
}

select element:

select:focus {
  /* 设置表单元素获取焦点时的样式 */
}

3. Code example:

Next, we give some specific code Example demonstrating how to use the :focus pseudo-class selector to change the style of a form element.

When the form input box gets focus, change the border color:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type=text]:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <form>
    <label for="name">用户名：</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

In the above code, when the input box gets focus, its border color will change to blue.

When the form drop-down box gets focus, change the background color:

<!DOCTYPE html>
<html>
<head>
  <style>
    select:focus {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <form>
    <label for="gender">性别：</label>
    <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
      <option value="other">其他</option>
    </select><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

In the above code, when the drop-down box gets focus, its background color will change to yellow.

Summary:

By using the :focus pseudo-class selector, we can set styles for different states of form elements to improve the visualization effect and user experience of interface interaction. At the same time, we also provide specific code examples for readers' reference. I hope this article can help readers better understand and apply the :focus pseudo-class selector.

The above is the detailed content of How to use the :focus pseudo-class selector to change the style of form elements. For more information, please follow other related articles on the PHP Chinese website!

css3 select 选择器伪类 input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the :last-child pseudo-class selector to select the style of the last child elementNext article：How to use the :last-child pseudo-class selector to select the style of the last child element

See more

How to use the :focus pseudo-class selector to change the style of form elements

Related articles