How to use the :focus pseudo-class selector to change the style of form elements-CSS Tutorial-php.cn

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

WBOY

Release： 2023-11-20 12:41:09

Original

1646 people have browsed it

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

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 {
  /* 设置表单元素获取焦点时的样式 */
}

Copy after login

textarea element:

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

Copy after login

select element:

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

Copy after login

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>

Copy after login

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>

Copy after login

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!