輸入[type = text]轉換延遲不起作用

Question

對於簡單的輸入文本框，我使用以下樣式，並且我想讓虛線邊框動起來以實現焦點，反之亦然。

 input { 
      font-family: inherit; 
      font-size: large; 
      border: 2px solid #1bd55a; 
      border-radius: 5px; 
     } 
     input[type=text] { 
      width: 500px; 
      height: 30px; 
      color: #616161; 
      padding-left: 6px; 
      border-style: dashed; 
      background-color: rgba(27, 213, 90, 0.12); 
      transition: 0.3s; 
     } 
     input[type=text]:focus { 
      border-style: solid; 
      outline: none; /* gets rid of the blue outline. */ 
     } 

但是，使用當前代碼，虛線和實體之間的過渡是立即的，在那裏沒有動畫。我爲單個屬性設置動畫，並且我知道可以使用svg的stroke屬性進行此項工作，那麼如何正確地將它應用於文本輸入？

Answer 1

不幸的邊框風格不是一個動畫的屬性。但是，您可以通過一些額外的標記和邊框顏色來實現該效果。

input { 
 
      font-family: inherit; 
 
      font-size: large; 
 
      border: 2px solid #1bd55a; 
 
      border-radius: 5px; 
 
     } 
 
     input[type=text] { 
 
      width: 500px; 
 
      height: 30px; 
 
      color: #616161; 
 
      padding-left: 6px; 
 
      background-color: rgba(27, 213, 90, 0.12); 
 
      border-color: rgba(27, 213, 90, 0.12); 
 
      transition: 0.3s; 
 
      margin: -2px; 
 
     } 
 
     input[type=text]:focus { 
 
      border-color: #1bd55a; 
 
      outline: none; /* gets rid of the blue outline. */ 
 
     } 
 

 
     div.extra-border { 
 
     display: inline-block; 
 
     border: 2px dashed #1bd55a; 
 
     border-radius: 5px; 
 
     }

<div class="extra-border"> 
 
     <input type="text" placeholder="text here" /> 
 
    </div>

這裏是fiddle。與svg所給予的不完全相同，但並不差。

Answer 2

根據此： https://www.w3schools.com/cssref/pr_border-style.asp

邊框樣式屬性是不能設置動畫。