聚焦时Safari输入元素闪烁

Question

im使用Angular制作网络应用。我使用由js生成的普通html输入，通过类通过css设置样式。现在，当我在Safari上进行即时通讯测试时，我在输入字段中单击。输入元素与光标一起闪烁。参见GIF

如何阻止呢？

一个Input的html看起来像这样：

<div data-uid="_h966wjgx5" class="roomlabel" style="left: 210px; top: 79px; opacity: 1;">
  <input type="number" class="roomlabel-input" data-label="wallLength" contenteditable="true" pattern="[0-9]*" style="width: 27px;">
  <span>cm</span>
</div>

我的CSS：

.roomlabel {
  position: absolute;
  padding: 0px 2px 0px 0px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border-radius: 1px;
  cursor: text;
  font-family: 'Montserrat', sans-serif;
  font-size: .6rem;
  overflow: hidden;
  
  background-color: rgba(255, 255, 255, 0.7);
  /* background-color: rgba(41, 49, 51, 0.7); */
  color: #293133;
  opacity: 0;

  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

.roomlabel span {

  margin-right: 3px;
}


.roomlabel:hover,
.roomlabel:focus {
  background-color: rgba(53, 191, 201, 0.95);
  color: #FFFFFF;
  z-index: 100;
}


.roomlabel-input {
  width: 0px;
  height: 100%;
  padding: 0px;
  margin: 0px;
  line-height: inherit;
  text-align: center;
  background-color: transparent;
  border-radius: 3px;
  border: none;
  color: inherit;
  font-family: 'Montserrat', sans-serif;
  pointer-events: none;
}
.roomlabel input[type="number"]::-webkit-outer-spin-button, 
.roomlabel input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.roomlabel input[type="number"] {
  -moz-appearance: textfield;
}