Placeholder Shown
:root { --shadow: 0 0 5px #833; } #search-top-box { background: #fff; box-shadow: inset var(--shadow); border-radius: 9999rem; left: 0; margin: auto; padding: 1em 0.5em; right: 0; text-align: left; width: 16rem; } #search-top-box-form { display: flex; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus { border: none; border-radius: 0; box-shadow: none!important; background: transparent; color: #d99!important; height: 2.4rem; outline: none!important; width: calc(100% - 3.5rem); } #search-top-box-form input[type=submit] { background: #fff0f0!important; border: none!important; border-radius: 50%; box-shadow: var(--shadow)!important; font-size: 0; height: 2.4rem; outline: none!important; transition: all 0.1s ease-in-out; width: 2.4rem; } #search-top-box-form input.empty + input[type=submit] { --shadow: none; transform: translateX(150%); } /* ヘッダーをまっさらにするやつ */ div#container-wrap { background: none; } div#header { background: #fff0f0; box-shadow: 0 0 3px #aaa; } div#header > :not(#search-top-box) { display: none; }
page revision: 20, last edited: 26 Nov 2019 12:05