如何在内部输入时间以填充而不替换时钟图标？

如何解决如何在内部输入时间以填充而不替换时钟图标？

我有时间输入，如下所示

这里的标签和文本非常接近并且看起来不太好。为了分开，我在文本上添加了一些顶部填充，但同时也在右侧移动了时钟图标。

如何在不影响时钟图标的情况下修饰文本？

已添加填充的版本低于

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
  .floating-input{
      padding-top: 17px;
      padding-left: 19px;
  }
  label {
    color: gray;
    font-size: 11px;
    position: absolute;
    left: 20px;
    top: 3px;
    pointer-events:none;
    z-index: 1;
  }
</style>
<body>

                 <label>From</label>
                <input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>

解决方法

在Chrome和Edge（铬）上，您可以使用::-webkit-calendar-picker-indicator伪元素选择器定位时钟图标以抵消填充。

label {
  color: gray;
  font-size: 11px;
  position: absolute;
  left: 20px;
  top: 3px;
  pointer-events: none;
  z-index: 1;
}

input[type="time"].floating-input {
  padding-top: 17px;
  padding-left: 19px;
}

input[type="time"].floating-input::-webkit-calendar-picker-indicator {
  position: relative;
  top: -6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>

</style>

<body>

  <label>From</label>
  <input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>

</html>