tag and in same label

Question

I have this html code :

label.btn span {
  font-size: 110% ;
}

label input[type="radio"] ~ i.fa.fa-circle-o{
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #c8c8c8;    
    display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
    color: #4682B4;    
    display: inline;
}
label:hover input[type="radio"] ~ i.fa {
    color: #4682B4;
}

div[data-toggle="buttons"] label.active{
    color: #4682B4;
}

div[data-toggle="buttons"] label {
  display: inline-block;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 2em;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  background-color: none;
  border: 0px solid #c8c8c8;
  border-radius: 3px;
  color: #777;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fa-2x {
    font-size: 100%;
}

div[data-toggle="buttons"] label:hover {
color: #4682B4;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

div#themeBar.container .navbar-collapse{
  text-align: center;
  margin: auto;
  width: 69%;
}

.row{
  margin: 0 0 0 0;
}

h5.theme {
  color: ;
  font-size: 100%;
  font-weight: bold;
}

div#container2_div_theme{
  margin-top: -3%;
  color: #777;

}

.form-control{
  cursor: pointer;
}

<html lang="fr">

  <head>
    <title id="index">WATCHNEWS</title>
    <meta charset="utf-8">
    <link rel="shorcut icon" href="code/WEB/static/logo.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="code/WEB/static/css/style.css" type="text/css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
<form> 
  <div class="btn-group" data-toggle="buttons"> 
      <label class="btn "> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>International</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>France</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>&Eacute;conomie</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Science/High-tech</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Art et Culture</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sport</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sant&eacute;</span> 
      </label>  
      <label class="btn active"> 
        <input type="radio" name="optradio" checked><i class="fa fa-check-circle-o fa-2x"></i><span>Tous</span> 
      </label>  
  </div> 
</form> 
   
  </body>
</html>

that gave me this with my CSS file:

for some reason, I have to remove the data-toggle="buttons", but that give me this as result :

Here the associate css :

    label.btn span {
      font-size: 110% ;
    }
    
    label input[type="radio"] ~ i.fa.fa-circle-o{
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #c8c8c8;    
        display: inline;
    }
    label input[type="radio"] ~ i.fa.fa-dot-circle-o{
        display: none;
    }
    label input[type="radio"]:checked ~ i.fa.fa-circle-o{
        display: none;
    }
    label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
        color: #4682B4;    
        display: inline;
    }
    label:hover input[type="radio"] ~ i.fa {
        color: #4682B4;
    }
    
    div[class="btn-group"] label.active{
        color: #4682B4;
    }
    
    div[class="btn-group"] label {
      display: inline-block;
      margin-bottom: 0;
      font-size: 13px;
      font-weight: bold;
      line-height: 2em;
      text-align: center;
      white-space: nowrap;
      vertical-align: top;
      cursor: pointer;
      background-color: none;
      border: 0px solid #c8c8c8;
      border-radius: 3px;
      color: #777;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    
    .fa-2x {
        font-size: 100%;
    }
    
    div[class="btn-group"] label:hover {
    color: #4682B4;
    }
    
    div[class="btn-group"] label:active, div[class="btn-group"] label.active {
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    
    div#themeBar.container .navbar-collapse{
      text-align: center;
      margin: auto;
      width: 69%;
    }
    
    .row{
      margin: 0 0 0 0;
    }
    
    h5.theme {
      color: ;
      font-size: 100%;
      font-weight: bold;
    }
    
    div#container2_div_theme{
      margin-top: -3%;
      color: #777;
    
    }
    
    .form-control{
      cursor: pointer;
    }

<html lang="fr">

  <head>
    <title id="index">WATCHNEWS</title>
    <meta charset="utf-8">
    <link rel="shorcut icon" href="code/WEB/static/logo.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="code/WEB/static/css/style.css" type="text/css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
<form> 
  <div class="btn-group"> 
      <label class="btn "> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>International</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>France</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>&Eacute;conomie</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Science/High-tech</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Art et Culture</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sport</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sant&eacute;</span> 
      </label>  
      <label class="btn active"> 
        <input type="radio" name="optradio" checked><i class="fa fa-check-circle-o fa-2x"></i><span>Tous</span> 
      </label>  
  </div> 
</form> 
   
  </body>
</html>

So, the problem is getting the radio button side by side. I manage to remove one of them by removing the tag, but I lost every hover I manage to do before. Plus, I don't know if it's a good idea to remove the tag... Do you know if I have to keep the ? if so, how can I remove the double radio button ?

EDIT :

Even with the boostrap class in my css, once the label are selected, they are not active

[class="btn-group"] > .btn input[type="radio"],
[class="btn-group"] > .btn-group > .btn input[type="radio"]{
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

label.btn span {
  font-size: 110% ;
}

label input[type="radio"] ~ i.fa.fa-circle-o{
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #c8c8c8;    
    display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
    display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
    color: #4682B4;    
    display: inline;
}
label:hover input[type="radio"] ~ i.fa {
    color: #4682B4;
}

div[class="btn-group"] label.active{
    color: #4682B4;
}

div[class="btn-group"] label {
  display: inline-block;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 2em;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  background-color: none;
  border: 0px solid #c8c8c8;
  border-radius: 3px;
  color: #777;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fa-2x {
    font-size: 100%;
}

div[class="btn-group"] label:hover {
color: #4682B4;
}

div[class="btn-group"] label:active, div[class="btn-group"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

div#themeBar.container .navbar-collapse{
  text-align: center;
  margin: auto;
  width: 69.9%;
}

.row{
  margin: 0 0 0 0;
}

h5.theme {
  color: ;
  font-size: 100%;
  font-weight: bold;
}

div#container2_div_theme{
  margin-top: -3%;
  color: #777;

}

.form-control{
  cursor: pointer;
}

<html lang="fr">

  <head>
    <title id="index">WATCHNEWS</title>
    <meta charset="utf-8">
    <link rel="shorcut icon" href="code/WEB/static/logo.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="code/WEB/static/css/style.css" type="text/css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
<form> 
  <div class="btn-group"> 
      <label class="btn "> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>International</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>France</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>&Eacute;conomie</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Science/High-tech</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Art et Culture</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sport</span> 
      </label>  
      <label class="btn"> 
        <input type="radio" name="optradio"><i class="fa fa-check-circle-o fa-2x"></i><span>Sant&eacute;</span> 
      </label>  
      <label class="btn active"> 
        <input type="radio" name="optradio" checked><i class="fa fa-check-circle-o fa-2x"></i><span>Tous</span> 
      </label>  
  </div> 
</form> 
   
  </body>
</html>

It's because of the boostrap links I think...I will edit the question — blabla, Jan 18 '18 at 23:54
Please post your code as a Stack Snippet. On the editor's toolbar is an icon with brackets: `<>`, click that and then paste your code in the appropriate frames. — zer00ne, Jan 18 '18 at 23:54
@zer00ne, I never notice this ! It is actually very cool! I did edit my code as a Stack Snippet :) — blabla, Jan 19 '18 at 00:02
`data-toggle="buttons"` comes from bootstrap: if you remove that and want to keep the same styles/behaviour you'll have to amend bootstrap (ccs + possibly scripts) on top of your own css — giorgiga, Jan 19 '18 at 00:08
@giorgiga, thank you! I found the boostrap css of data-toggle, I copied the code by changing the class data-toggle by the class of my div and it seems to work just fine! thank you — blabla, Jan 19 '18 at 00:34
The only problem now is that once selected the label are not active. I edited my code — blabla, Jan 19 '18 at 00:40
You can take a look at this for your select problem: http://jsfiddle.net/5TDg9/3mDRY/ — Duke, Jan 19 '18 at 01:44

tag and in same label

0 Answers0