Question

我有以下CSS

我希望输入具有样式，但其值可以保留为无样式。

input[type=text] {
  width: 70px;
  height: 70px;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  border-left: 2px solid rgba(255, 255, 255, 1);
  font-size: 27px;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<input type="text" name="timeInput" id="time" class="time1" readonly>

Answer 1

您无法看到它的样式。因为没有任何线索可以查看样式，例如背景或内容。
如果要应用动画CSS，则需要设置关键帧以进行动画处理。

@keyframes spin {
  from {
    width: 0px;
    height: 0px;
  }
  to {
    width: 150px;
    height: 150px;
  }
}

input[type=text] {
  width: 70px;
  height: 70px;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  border-left: 2px solid rgba(255, 255, 255, 1);
  font-size: 27px;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<input type="text" name="timeInput" id="time" class="time1" readonly value="Foo bar">

将CSS应用于输入而不影响其值

1 个答案: