带有 svg 的 HTML 输入边框图像不起作用

Question

我正在尝试使用图像边框选项将图像边框添加到输入字段，但它没有将 SVG 图像显示为边框。

有什么想法吗？

#inputCode{
   position: absolute;
   top: 35%;
   left: 50%;
   width: 745px;
   border-image: url(../images/white_rubrick.svg);
   font-size: 50px;
   text-align: center;
   background-color: transparent;
   color: white;
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

<input 
      type="text" 
      name="inputCode" 
      id="inputCode" 
      size="8"
      maxlength="8" 
      autofocus 
      placeholder="PUT YOUR CODE HERE" 
      style="text-transform:uppercase"/>

预期:

问题:

Answer 1

为什么要它是图像？只用代码生成预期的不是更好吗？我的意思是使用 -webkit-appearance: none;

.code-input {
  -webkit-appearance: none;
  width: 250px;
  height: 30px;
  background: #fff;
  color: #000;
  font-weight: bold;
  border: 3px solid #000;
  border-radius: 30px;
  text-align: center;
}

<input class="code-input" value="Put your code here" />