form search css

search-form.css

<style> 

.search-field{position:relative;width:9.3em}.search-field__input{border:0;border-bottom:2px solid #ccc;background:0 0;text-overflow:ellipsis}.search-field__input:focus{outline:0}.search-field__input::-webkit-input-placeholder{color:#e6e6e6}.search-field__input:-ms-input-placeholder{color:#e6e6e6}.search-field__input::placeholder{color:#e6e6e6}.search-field__icon{position:absolute;right:-50px;top:45%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width:0) and (max-width:599px){.search-field{width:90%;font-size:32px}.search-field__icon{right:-30px}}.search-field--large{width:100%}.search-field--large .search-field__input{border-bottom:2px solid #e6e6e6;font-family:Larsseit-Bold,sans-serif;font-weight:400}

input, input::-webkit-input-placeholder {
    font-size: 30px;
    line-height: 2;
    font-weight: bold
}

button {
    padding:17px 30px;
    background: #43ac77;
    border:none;
    border-radius: 10px;
    color:#fff;
    font-size: 17px;
    font-weight: bold;
    margin-left:20px;
}
button:hover {
    opacity: 0.7;
    cursor: pointer;
}

</style>

<input class="search-field__input" type="search" placeholder="Logo, website, tattoo..." autofocus data-search-field autocomplete="nope" data-scrollto="search-field" />
           <button> Search </button>