In the modern web development landscape, user experience is key. One small but impactful element you can add to your forms is a custom time picker. Instead of using the default browser style, why not create a stylish and functional time picker with a dynamic clock using HTML and CSS? This not only enhances the aesthetics of your web page but also provides a better user interaction.
Why Customize Your Time Picker?
Default time pickers are functional but lack personality. A custom time picker allows you to align this element with the overall design of your website, making the user interface more cohesive and visually appealing. Additionally, it can improve usability, especially on touch devices where default inputs might be less user-friendly.
Features of the Custom Time Picker
This custom time picker includes:
- A dynamic clock icon that visually represents the time input.
- A modern, clean design that integrates seamlessly with any web page.
- Enhanced usability with clear visual cues and easy interaction.
How It Works
The custom time picker combines HTML for structure, CSS for styling, and a bit of SVG for the clock icon. By positioning the SVG within the input field and using CSS to style the input, we create an engaging and interactive element that stands out from standard form controls.
Benefits of Using SVG for Icons
Scalable Vector Graphics (SVG) are perfect for creating icons because they are resolution-independent and can be scaled to any size without losing quality. This ensures that your clock icon looks crisp on all devices, including high-resolution screens.
Implementing the Custom Time Picker
Creating this custom time picker is straightforward. The process involves defining the HTML structure for the input and SVG, then applying CSS to style the elements appropriately. The CSS handles the layout, colors, and interaction styles, ensuring the input is both functional and attractive.
Step-by-Step Guide
- HTML Structure: Set up the basic HTML for the time input and SVG icon.
- CSS Styling: Apply styles to position the SVG within the input field, and customize the appearance of the input to match your site’s design.
- Fine-Tuning: Adjust any necessary styles to ensure compatibility across different browsers and devices.
Copy the Code Below
To make things easier, we’ve provided the complete code below. You can simply copy and paste it into your project to get started. This code is optimized for both functionality and aesthetics, ensuring a great user experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Input</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
<style>
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #202124;
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
margin: 0;
box-sizing: border-box;
}
.inpTime {
position: relative;
transform: scale(1.5);
}
.inpTime svg {
position: absolute;
background: #eee;
z-index: 1;
top: 9px;
left: 11px;
pointer-events: none;
border-radius: 50%;
transform: translate(0, 0, 0);
}
.inpTime svg path {
stroke: #2D2E31;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
input[type="time"] {
position: relative;
background: #2D2E31;
color: #eee;
border-radius: 8px;
appearance: none;
border: 0;
text-align: center;
padding: 6px 12px 6px 33px;
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 18px;
}
input[type="time"]:focus {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
input[type="time"]::-webkit-calendar-picker-indicator {
position: absolute;
left: -4px;
background: none;
}
</style>
</head>
<body>
<div class="inpTime">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 4V7" id="hourHand"/>
<path d="M7 2.5V7" id="minHand"/>
</svg>
<input type="time" value="09:41" id="timeInput">
</div>
</body>
</html>