如何為不同的輸入單選框創建不同的css styles？

Question

我有一個帶有多種輸入單選類型的表單：

<form class="search" action="{{ url_for('np.bkg') }}" method="post">

    <input type="text" name="query" style="max-width:700px" placeholder="Search over bkg..." id="query" value="{{query}}" autocomplete="on" required>
    <button type="submit"><i class="fa fa-search"></i></button>
    <div>
    <input type="radio" name="searchType" id="kmatch" value="kmatch" checked="checked"> match </input>
    <input type="radio" name="searchType" id="kextraction" value="kextraction"> extract </input>
    </div>
    
</form>

在我的 css 我有這個：

form.search input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 100%;
  background: #f1f1f1;
  border-radius: 15px;
}

現在，我的問題是，如何為第二輸入無線電類型創建不同的 css 樣式？ 當前的“輸入”css 元素將應用於兩個單選框。

編輯：我認為我的 css 僅適用於第一個輸入 type='text' 標簽。 所以問題是一樣的，如何為2個不同的輸入無線電標簽制作不同的css styles？

Answer 1

對於不同的 styles，您可以給這兩個元素兩個不同的類並為這些類定義樣式：

.radio-input1{
   width:20px;
   height:20px;
}

.radio-input2{
   width:10px;
   height:10px;
}

或者你可以給兩個輸入，兩個不同的 id 並重復上面的代碼：

#radio1{
   width:20px;
   height:20px;
}


#radio2{
   width:10px;
   height:10px;
}

對於課程：

<input class="radio-input1">

對於身份證：

<input id="radio1">

Answer 2

試試這個（以獲得更有吸引力和用戶友好的布局）：

<style>
    .radio-label{
        border: 1px solid #abc;
        border-radius: 4px;
        padding: 7px 7px 5px 3px;
        cursor: pointer;
        box-shadow: 0 0 10px #abc;
    }
    .radio-label.radio-1{
        background-color: #ddf;
    }
    .radio-label.radio-2{
        background-color: #eed;
    }
</style>

<label class="radio-label radio-1" for="radio-1"><input type="radio" name="radio-btn" id="radio-1" >Radio 1</label>
<label class="radio-label radio-2" for="radio-2"><input type="radio" name="radio-btn" id="radio-2" >Radio 2</label>

編輯：您還可以通過以下方式使用無線電輸入：

.radio-label input{
        width: 20px;
        height: 20px;
        position: relative;
        top: 4px;
    }