Created
March 15, 2020 06:20
-
-
Save kaoru-fukusato/bb537efae41352104469a7231def9ade to your computer and use it in GitHub Desktop.
検索フォームをレスポンシブ化する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.searchform { | |
margin: 34px 10px 40px 10px; | |
} | |
.searchform { | |
overflow: hidden; | |
clear: both; | |
position: relative; | |
width: 100%; | |
height: 48px; | |
box-sizing: border-box; | |
} | |
.searchform label, | |
.searchform input, | |
.searchform button { | |
height: 100%; | |
box-sizing: border-box; | |
} | |
.searchform input, | |
.searchform button { | |
display: block; | |
position: absolute; | |
top: 0; | |
font-size: 16px; | |
} | |
.searchform label { | |
display: block; | |
position: relative; | |
margin-right: 24%; | |
} | |
.searchform input { | |
margin: 0; | |
} | |
.searchform input:not([type="submit"]) { | |
left: 0; | |
padding: 4px 16px; | |
width: 100%; | |
border: solid 1px #ccc; | |
border-right: none; | |
border-radius: 4px 0 0 4px; | |
} | |
.searchform button, | |
.searchform input[type="submit"] { | |
right: 0; | |
width: 24%; | |
padding: 0; | |
line-height: 48px; | |
color: #fff; | |
border: none; | |
border-radius: 0 4px 4px 0; | |
background: #2f78d0; | |
transition: all 0.3s ease-in-out; | |
} | |
.searchform button:hover, | |
.searchform input[type="submit"]:hover { | |
background: #508ed8; | |
} | |
.searchform button > * { | |
line-height: 48px; | |
} | |
.searchform .screen-reader-text { | |
clip: rect(1px 1px 1px 1px); | |
clip: rect(1px, 1px, 1px, 1px); | |
height: 1px; | |
overflow: hidden; | |
position: absolute !important; | |
width: 1px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment