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;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License