如何修改HTML中input type="time"元素的选中区域大小及字体大小？

Hey there! Let's break down how to solve your two styling questions for the time input:

1. Adjusting the Selection Area Size of <input type="time"> #

First, it's important to note that native <input type="time"> elements render differently across browsers, so some styles might behave inconsistently. Here's how you can tweak the selection-related areas:

• Modify the input's focused highlight area:
  The default focus outline can be adjusted or replaced for a larger/smaller highlight. Use the outline property or box-shadow for more control:

  #inputy_d:focus {
    /* Replace default outline with a larger custom one */
    outline: 3px solid #2196F3;
    outline-offset: 2px;
    /* Or use box-shadow for a softer, expanded effect */
    /* box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.3); */
  }
  

• Expand the internal selectable text area:
  If you're referring to the area where the time text lives, use padding to increase the space around the text—this effectively makes the selectable region feel larger:

  #inputy_d {
    padding: 0.5rem 1rem; /* Adjust values to expand/shrink the internal area */
  }
  

• A quick note on the native time picker panel:
  Most browsers don’t let you directly style the pop-up time picker dropdown that appears when you click the input. If you need full control over its size and appearance, you’ll likely need to use a custom JavaScript-based time picker component instead of the native one.

2. Changing the Font Size of <input type="time"> #

This is straightforward—just add the font-size property to your existing CSS rule for #inputy_d. You can also adjust line-height to keep the text vertically aligned properly:

#inputy_d{
  box-shadow: 2px 2px 5px black;
  width: 20%;
  margin-left: 0px;
  margin-right: auto;
  font-size: 1.2rem; /* Tweak this value to your desired size */
  line-height: 1.5; /* Optional: Fine-tune vertical alignment */
}

If the calendar/spin buttons look misaligned after resizing the font, fix them with WebKit-specific pseudo-elements (works for Chrome, Safari, Edge):

#inputy_d::-webkit-inner-spin-button,
#inputy_d::-webkit-calendar-picker-indicator {
  height: 1.2em; /* Match the font size to keep buttons aligned */
}

内容的提问来源于stack exchange，提问作者Matúš Sobinovský