如何将<input type=" time“/>的可点击区域从图标更改为显示的时间？

.custom-time-input::-webkit-calendar-picker-indicator {
  display: none; /* 隐藏默认的时间选择图标 */
}

.custom-time-input {
  appearance: none; /* 移除默认样式 */
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 0; /* 移除内边距 */
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 移除边框 */
  font-family: inherit; /* 继承字体样式 */
  cursor: pointer; /* 设置鼠标样式为指针 */
}

.custom-time-input::before {
  content: attr(value); /* 使用输入框的value属性作为显示的时间 */
  display: inline-block;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}

.custom-time-input:focus::before {
  outline: none; /* 移除获取焦点时的外边框 */
  box-shadow: 0 0 3px #ccc; /* 添加获取焦点时的阴影效果 */
}

<input type="time" class="custom-time-input" value="12:00">