如何实现单选框选中时显示Font Awesome箭头图标（CSS3）

Absolutely, this is totally achievable! Let’s break down how to get that down arrow icon showing up alongside the label’s bottom border when a category radio button is selected, and make this work for all your gallery categories.

First, Let’s Confirm a Solid HTML Structure #

You’ll want your radio inputs paired directly with their labels (so CSS can target them easily). Here’s a standard setup that works:

<div class="gallery-filters">
  <!-- All Categories -->
  <input type="radio" id="filter-all" name="gallery-category" checked>
  <label for="filter-all">All <i class="fa-solid fa-chevron-down"></i></label>

  <!-- Design Category -->
  <input type="radio" id="filter-design" name="gallery-category">
  <label for="filter-design">Design <i class="fa-solid fa-chevron-down"></i></label>

  <!-- Photography Category -->
  <input type="radio" id="filter-photography" name="gallery-category">
  <label for="filter-photography">Photography <i class="fa-solid fa-chevron-down"></i></label>
</div>

CSS Fix: Target the Checked Radio + Label/Icon #

The most likely issue is a misconfigured CSS selector. Let’s use the adjacent sibling combinator (+) to target the label immediately following a checked radio input, then toggle the icon’s visibility. We’ll use opacity (instead of display: none) to add a smooth transition too:

/* Default state: Hide arrow, no border */
.gallery-filters label {
  padding-bottom: 6px;
  /* Add your base label styles: font, padding, cursor, etc. */
}

.gallery-filters label i.fa-chevron-down {
  opacity: 0;
  margin-left: 5px;
  transition: opacity 0.2s ease-in-out; /* Smooth fade effect */
}

/* Checked state: Show border + arrow */
.gallery-filters input[type="radio"]:checked + label {
  border-bottom: 2px solid #2d3748; /* Replace with your desired border color */
}

.gallery-filters input[type="radio"]:checked + label i.fa-chevron-down {
  opacity: 1;
}

Why This Works #

• The input[type="radio"]:checked + label selector targets the label directly after a checked radio button—perfect for your setup.
• We use opacity: 0 to hide the icon by default (instead of display: none) so we can add a transition for a polished feel.
• This will automatically apply to all category radio/label pairs in your .gallery-filters container, no extra classes needed.

If Your HTML Structure Is Different #

If your radio input is inside the label (instead of before it), you can use the :has() pseudo-class (supported in all modern browsers) to target the label containing a checked radio:

.gallery-filters label:has(input[type="radio"]:checked) {
  border-bottom: 2px solid #2d3748;
}

.gallery-filters label:has(input[type="radio"]:checked) i.fa-chevron-down {
  opacity: 1;
}

This should resolve your icon visibility issue while keeping the bottom border effect you already have. Test it out, tweak the colors/transitions to match your portfolio’s style, and you’re good to go!

内容的提问来源于stack exchange，提问作者Francisco Rosales