在同一标签中标记<input />和<i>

时间：2018-01-18 23:43:40

标签： html css

我有这个HTML代码：

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>

用我的CSS文件给了我这个： result

出于某种原因，我必须删除data-toggle =“buttons”，但这样就可以得到结果：

result2

这里是关联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>

所以，问题是将单选按钮并排。我设法通过删除标签删除其中一个，但我丢失了我之前设法做的所有悬停。另外，我不知道删除标签是否是个好主意...... 你知道我是否要保留？如果是这样，我怎么能删除双单选按钮？

编辑：

即使我的css中有了boostrap类，一旦选择了标签，它们就不会激活

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

0 个答案:

没有答案
相关问题
最新问题