[ui/ux] 検索フォームui パターン洗い出し

components/SearchForm.vueコンポーネント

パターン1

パターン2

パターン3

パターン4

採用

やぱこれ

.search-form {
    height: 30px;
    width: 250px;
    border-radius: 0.3rem;
    border: none;
    padding-top: 5px;
    padding-left: 10px;
    background: transparent;
    box-shadow: inset 0 10px 25px 0 rgba(0, 0, 0, .5);
    font-size: 15px;
    color: #fff;
}
    ::placeholder {
        font-size: 15px;
        color: rgb(194, 196, 211);
    }