HTMLのフォーム
input要素 要素
select 要素
option 要素
textarea 要素
cols プロパティは幅（columns）
rows プロパティは行数
button 要素
label 要素
スタイル案
ress 使っている前提
code: form.scss
input,
textarea,
select,
button {
font-size: 1.6rem;
line-height: 1.5;
outline: none;
&:disabled {
background-color: #eee;
cursor: not-allowed;
}
}
input:not(type="file"),
textarea,
select,
button {
border: 1px solid #ccc;
background-color: #fff;
padding: 6px 12px;
border-radius: 4px;
&:hover {
background-color: #f7f7f7;
}
&:focus {
border-color: #666;
background-color: #f7f7f7;
}
}
select,
inputtype="file" {
&:hover {
cursor: pointer;
}
}
select {
padding-right: 24px;
background: url(/select.svg) no-repeat right;
}
input.wide,
textarea {
max-width: 100%;
width: 500px;
}
button,
inputtype="button",
inputtype="submit" {
background-color: #f4ac03;
color: #fff;
border-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: #ff8400;
}
}
inputtype="file" {
font-size: 1.3rem;
width: 100%;
max-width: 300px;
}
code: select.svg
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 8L10 13L15 8" stroke="#666666"/>
</svg>
https://gyazo.com/674470bdbd0866ceab4a5d931668c066