🔹 Changing Border Color on input:focus
By changing the border color when an input element is focused, you can visually highlight the user interface.
The **border** is contained within the element.
**Impact range**: The size of the element is actually changed. Since the border expands the element’s area, it can affect the layout.
**Adjustment method**: The border can be detailed using `border-width`, `border-color`, `border-style`, etc.
```css input:focus { border-color: #3498db; /* Change the border color when focused */ } ``` Additionally, there is a similar way to change `border-color` and remove the outline using `input:focus`.
Both methods achieve similar results, but the difference lies in which property you use. Both change the border color on focus, but one uses `border` and the other uses `outline`.
💡 Partial Code
input:focus {
outline-color: #4CAF50; /* Change the border color on focus */
}
💻 Complete Working Code (This is the copy-paste code that works directly in HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Changing Border Color on input:focus</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
</head>
<body>
<input type="text" placeholder="Enter text">
<style>
input:focus {
outline-color: #4CAF50; /* Change the border color on focus */
}
</style>
</body>
</html>
🎨 Practical Design Techniques for Focus Styles
Focus styles for form elements are essential for improving usability and accessibility. Styling with outline-color ensures visibility during keyboard navigation while maintaining design consistency.
🌈 Optimizing Color Design
#4CAF50 (green) is a standard choice but can be adjusted to match the site’s color scheme. For example, #3498db (blue) conveys trust, while #ff7043 (orange) promotes caution. Maintaining a contrast ratio of at least 4.5:1 ensures accessibility for users with visual impairments.
✨ Interactive Feedback
Adding transition: outline-color 0.3s ease allows smooth color transitions. Combining this with box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3) creates a softer, more modern impression. However, animation effects should be kept subtle.
📱 Responsive Design Support
On mobile devices, slightly increasing outline-width (to around 3px) clarifies tap targets. For dark mode, use @media (prefers-color-scheme: dark) to specify a lighter outline color.
Focus styles greatly influence user experience, but excessive decoration can cause confusion. Balancing functionality and aesthetics while applying consistent styles site-wide is essential.