何故.form inputのCSSが適用されるのか理解した上でsubmit-buttonクラスにboder-radius: 50px;を適用したい

Question

前提・実現したいこと

submit-buttonクラスにCSS,border-radiuus: 50px;を適用したいです。
しかし実際には.form inputのborder-radiuus: 5px;が適用されています。
CSSの優先順位は具体的なクラス名があるsubmit-buttonの方が高かった気がします。
どうして.form inputのCSSが適用されるのかを知りたいです。

よろしくお願いします。

該当のソースコード

<div class="form">
        <h1>資料請求フォーム</h1>
        <h2>まずは無料で資料請求からどうぞ。</h2>
        <ul>
            <li><input type="text" placeholder="姓"></li>
            <li><input type="text" placeholder="名"></li>
            <li><input type="text" placeholder="メールアドレス"></li>
            <li><textarea>質問などはこちら（空欄でもOKです）</textarea></li>
        </ul> 
        <input class="submit-button" type="button" value="送信">
</div>

.form {
    background-color:  #ebb94d;
    padding: 60px 0;
}

.form input {
    width: 70%;
    padding: 5px;
    height: 55px;
    border-radius: 5px;
    border: none;
    margin-bottom: 25px;
}

.form textarea {
    width: 70%;
    height: 80px;
    padding: 5px;
    height: 55px;
    border-radius: 5px;
    border: none;
    margin-bottom: 25px;
}

.submit-button {
    width: 70%;
    background-color: #da6b64;
    color: white;
    font-size: 23px;
    border-radius: 100px;
    border: none;
    font-weight: 600;
}

実際の画像

isaraというLPの模写の問い合わせフォームです。
送信ボタンをもっと丸みを持たせたいです。

Comments

[m.ts10806]

タイトルと要件ずれてませんか？
タイトルを推したいのでしたら色々試した簡易コードにて質問されたほうがよいですし、そうでないならタイトルを調整されたほうが良いです

Answer 1

詳細度をあげればいいでしょう。
詳細度の計算法は下記を参考に。

参考リンク

カスケードと継承　詳細度

CSSセレクタの優先順位の計算方法 - Qiita

セレクタを複数指定した場合は加算されますので、
.form inputは、10+1=11点
.submit-buttonは、10点
前者の方が詳細度は高いです。

.form input とか input.submit-button というようにすれば詳細度は上がります。

Answer 2

.submit-button {
↓↓↓
.form input.submit-button {