CSS Input Field Template: Styling with border-radius and padding
📝 Usage
This template is used to add a border-radius and padding to an input field.
📘 Explanation
This code uses `border-radius` to round the corners of the input field and `padding` to adjust the inner space. The `input:focus` rule changes the border color when the input field is focused.
outline is displayed outside the element. Unlike the border, it does not affect the size of the element.
Impact range: The outline is mainly used for visual effects. Even when the outline is displayed, the surrounding space of the element is not changed.
Adjustment methods: The outline can be set using outline-width, outline-color, outline-style, etc.
input:focus { border-color: #3498db; /* Border color on focus */ outline: none; /* Remove outline on focus */ } Additionally,
You can also change the outline-color using input:focus.
🔹 Partial Code
<style>
/* Input field decoration */
input {
border-radius: 8px; /* Rounded corners */
padding: 10px 15px; /* Inner padding */
font-size: 16px; /* Font size */
border: 2px solid #ccc; /* Border */
transition: all 0.3s ease;
}
/* Focused input field styles */
input:focus {
border-color: #3498db; /* Border color on focus */
outline: none; /* Remove outline on focus */
}
</style>
💻 Full Working Code
<input type="text" placeholder="Enter your name" />
<style>
/* Input field decoration */
input {
border-radius: 8px; /* Rounded corners */
padding: 10px 15px; /* Inner padding */
font-size: 16px; /* Font size */
border: 2px solid #ccc; /* Border */
transition: all 0.3s ease;
}
/* Focused input field styles */
input:focus {
border-color: #3498db; /* Border color on focus */
outline: none; /* Remove outline on focus */
}
</style>
🎨 Practical Techniques for Input Field Design
Styling input fields is a crucial element that directly impacts user experience. By properly combining border-radius and padding, you can create easy-to-use and visually appealing forms.
📏 Key Points for Optimal Sizing
padding: 10px 15px is a standard size, but on mobile devices, increasing to padding: 12px 16px makes tapping easier. Appropriate border-radius values range from 4px to 12px, which should be adjusted to fit the site's design style.
🌈 Color Design Variations
The border-color on focus can be changed to match the site’s color theme, such as #3498db (blue), #4CAF50 (green), or #FF7043 (orange). For dark mode support, use @media (prefers-color-scheme: dark) to specify a lighter border color.
✨ Enhancing Interaction
Adding box-shadow to the transition property and setting box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3) on input:focus provides a more prominent focus effect. However, it is important to keep animations subtle.
Input field design should prioritize functionality while harmonizing with the overall site design system. Especially on long form pages, maintaining consistent styles improves usability.