.tns-hb-search { display: inline-flex; align-items: center; margin-left: 12px; position: relative; } .tns-hb-search-toggle { position: absolute; opacity: 0; pointer-events: none; } .tns-hb-search-icon { display: inline-flex; align-items: center; cursor: pointer; padding: 0 8px; color: #fff; } .tns-hb-search-form { display: inline-flex; align-items: center; } .tns-hb-search-input { width: 0; opacity: 0; padding: 0; border: 1px solid transparent; border-radius: 4px; transition: width 180ms ease, opacity 180ms ease, padding 180ms ease, border-color 180ms ease; } .tns-hb-search-toggle:checked ~ .tns-hb-search-form .tns-hb-search-input { width: 200px; opacity: 1; padding: 5px 8px; border-color: rgba(255,255,255,0.4); background: #fff; color: #000; } @media (max-width: 520px) { .tns-hb-search-toggle:checked ~ .tns-hb-search-form .tns-hb-search-input { width: 150px; } }