How to create different css styles to different input radio boxes?

I have a form with several input radio type:

<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>

In my css I have this:

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

Now, my question, how to create a different css style for the 2nd input radio type? The current ‘input’ css element will apply to both radio boxes.

EDIT: I think my css only applies to the first input type=’text’ tag. So the question is the same, how to make different css styles for 2 different input radio tags?

>Solution :

for different styles, you can either give the two elements two different classes and define style for those classes :

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

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

or you can give the two inputs, two different ids and repeat the above code:

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


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

for classes:

<input class="radio-input1">

for id :

<input id="radio1">