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

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?

CodePudding user response：

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

CodePudding user response：

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