【HTML+CSS】それっぽい入力フォームを作る

最初に

管理人は、普段UIはVuetifyとかに丸投げしています。
なのでUIセンスとかに期待しないでください。

完成すればこうなる

ソースコード

//index.html
<div id="form">
    <input class="text" type="text" placeholder="テキスト" />
    <textarea class="textarea" cols="30" rows="10" placeholder="テキストエリア"></textarea>
    <input class="submit" type="submit" value="送信" />
</div>

style.css
#form
{
    margin:0 10px;
}

.text
{
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    box-sizing: border-box;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgba(0, 0, 0,0.2);
    margin: 10px auto;
}

.text:focus
{
    outline: none;
    border-bottom: 2px solid rgba(0, 0, 0,1);
}

.textarea
{
    margin: 10px auto;
    width:100%;
    padding: 10px 15px;
    font-size: 16px;
    box-sizing: border-box;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid rgba(0, 0, 0,0.2);
}


.textarea:focus
{
    outline: none;
    border-bottom: 2px solid rgba(0, 0, 0,1);
}

.text::placeholder,.textarea::placeholder
{
    font-family: "メイリオ";
}

//ボタン
.submit
{
    border: none;
    border-radius: 10px;
    font-size: 24px;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: black;
    color:white;
    transition: 0.2s;
}

.submit:hover
{
    background-color: blue;
}

あとがき

いつかブログもUIライブラリに頼らないようにしたいなぁ。