css美化原生input time时间组件

/* 美化原生 input time 组件的 CSS 代码 */

input[type="time"] {
    /* 设置输入框的基本样式 */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
}

input[type="time"]:focus {
    /* 当输入框获得焦点时，改变边框颜色 */
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="time"]::-webkit-calendar-picker-indicator {
    /* 修改时间选择器图标 */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95V9.02c0-.56-.23-1.12-.64-1.49a2.49 2.49 0 0 0-1.76-.49H9.01C8.45 7.5 8 7.95 8 8.5v4.97c0 .55.45 1 .99 1h2.97v2.97c0 .55.45 1 .99 1s1-.45 1-1v-2.97h2.97c.54 0 1-.45 1-1V8.5c0-.55-.45-1-.99-1z"/></svg>') no-repeat center right 8px;
    background-size: 16px 16px;
    cursor: pointer;
}

input[type="time"]::-webkit-inner-spin-button, 
input[type="time"]::-webkit-clear-button {
    /* 隐藏默认的上下箭头和清除按钮 */
    display: none;
}

解释说明：

1. 基本样式：设置了 input[type="time"] 的内边距、字体大小、边框、圆角和过渡效果。
2. 焦点样式：当输入框获得焦点时，边框颜色变为蓝色，并添加一个浅蓝色的阴影效果。
3. 时间选择器图标：使用了自定义的 SVG 图标替换默认的时间选择器图标，并调整了图标的大小和位置。
4. 隐藏默认按钮：通过设置 display: none 隐藏了默认的上下箭头和清除按钮。