[자바 스크립트] 탭 키를 사용하여 초점을 변경하는 애니메이션 추가

이런 게 필요한지 확인 해주세요 ..

.foo {
      height: 50px;
      }
      
      input[type=text], textarea {
        -webkit-transition: all 0.30s ease-in-out;
          -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
              -o-transition: all 0.30s ease-in-out;
                outline: none;
                  padding: 3px 0px 3px 3px;
                    margin: 5px 1px 3px 0px;
                      border: 1px solid #DDDDDD;
                      }
                       
                       input[type=text]:focus, textarea:focus {
                         box-shadow: 0 0 5px rgba(81, 203, 238, 1);
                           padding: 3px 0px 3px 3px;
                             margin: 5px 1px 3px 0px;
                               border: 1px solid rgba(81, 203, 238, 1);
                               }

<ul style="height:70px; overflow:auto">
      <li class="foo">
          <input type="text">
            </li>
              <li class="foo">
                  <input type="text">
                    </li>
                      <li class="foo">
                          <input type="text">
                            </li>
                              <li class="foo">
                                  <input type="text">
                                    </li>
                                      <li class="foo">
                                          <input type="text">
                                            </li>
                                              <li class="foo">
                                                  <input type="text">
                                                    </li>
                                                      <li class="foo">
                                                          <input type="text">
                                                            </li>
                                                              <li class="foo">
                                                                  <input type="text">
                                                                    </li>
                                                                      <li class="foo">
                                                                          <input type="text">
                                                                            </li>
                                                                              <li class="foo">
                                                                                  <input type="text">
                                                                                    </li>
                                                                                    
                                                                                    </ul>

스 니펫 확장

자세한 내용은 아래 링크를 확인하십시오.

빛나는 파란색 입력 하이라이트

이것이 당신이 원했던 것입니까?

출처
https://stackoverflow.com/questions/39917113