在检查输入时，我会遇到一些不便，会出现一个字体很棒的图标。
这是一个投资组合库部分，我在标签内添加了图标，因此目标是当我选择类别菜单时，它显示一个边框底部和一个指向下方的图标。
到目前为止，我只能使边界工作，但我无法显示此图标。 我已经尝试了不透明度，但我不确定我是否正在使用输入选择器。
它应该以相同的方式适用于所有类别。
有人可以告诉我是否可以这样做吗？
我很感激你的帮助。
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
/*menu rounded corners*/<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：2)
您需要添加此css代码：
input[type="radio"]:checked+label i {
opacity: 1;
}
当选中相应的单选按钮时，这会将图标的opacity设置为1
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
input[type="radio"]:checked+label i {
opacity: 1;
}
/*menu rounded corners*/
.label-all {
border-radius: 3px 0 0 3px;
}
.label-portfolio {
border-radius: 0 3px 3px 0;
}
input {
display: none;
}
img {
display: block;
width: 300px;
height: auto;
}
li {
position: relative;
width: 300px;
}
/*Overlay effect for photos*/
li:hover .overlay,
.container:hover .fa-eye {
opacity: 1;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
transition: .5s ease;
opacity: 0;
height: 35%;
}
.text {
color: #f1f1f1;
font-size: 14px;
text-align: left;
padding: 0 5px 5px 10px;
line-height: 1.6;
}
.fa-eye {
position: absolute;
right: 5px;
top: -26px;
color: #fff;
border: 2px solid #fff;
border-radius: 100%;
background-color: #22b0b4;
padding: 15px;
overflow: visible;
}
/*Select Categorie*/
input#select-creative:checked~.gallery li:not(.creative-item),
input#select-corporate:checked~.gallery li:not(.corporate-item),
input#select-portfolio:checked~.gallery li:not(.portfolio-item) {
opacity: 0.1;
}<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
<i class="fas fa-caret-down"></i>
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
<i class="fas fa-caret-down"></i>
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
<i class="fas fa-caret-down"></i>
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>