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

Question

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?

Answer 1

Try this (for more attractive and user-friendly layout):
<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>
EDIT: You can also play with radio inputs with:
.radio-label input{
width: 20px;
height: 20px;
position: relative;
top: 4px;
}

Answer 2

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