表示例
HTMLコード
- <form id="search" action="#"><input id="search-i" name="name" type="text" placeholder="検索したい文字を入力"><input id="search-b" type="submit" value="検索"></form>
CSSコード
- form#search{
- display:flex;width:88%;box-sizing:border-box;margin:4px auto;padding:0;border:0;border-radius:4px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
- }
- form#search:focus{
- box-shadow:0 0 4px 2px rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
- }
- form#search:focus-within{
- box-shadow:0 0 4px 2px rgb(206,206,206), 0 0 0 1px rgb(216,216,216);
- }
- input#search-i{
- flex:1 1 auto;width:calc(100% - 80px);box-sizing:border-box;padding:8px;border:solid 1px rgb(44,119,243);border-right:0;border-radius:4px 0 0 4px;outline:0;background-color:rgb(247,247,255);letter-spacing:0.02em;-webkit-appearance:none;
- }
- input#search-i::placeholder{
- color:rgb(90,90,90);
- }
- input#search-b{
- width:80px;box-sizing:border-box;border:0;padding:8px;border-radius:0 4px 4px 0;outline:0;background-color:rgb(44,119,243);color:rgb(249,249,249);letter-spacing:0.02em;cursor:pointer;-webkit-appearance:none;
- }
- input#search-b:hover{
- background-color:rgb(13,95,232);
- }
