Question

input {
  position: absolute;
  left: -9999px;
}

input + label {
  border-right: solid 1px #000;
  padding-right: 8px;
  margin-right: 8px;
}

input:checked + label {
  display: none;
}

<input type="radio" id="one" name="option" checked/>
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>

There are three options, when the option is selected, it should be hidden, including the border line between the option and the next option.

For example,

When I select "One", I should see "Two | Three".

When I select "Two", I should see "One | Three".

When I select "Three", I should see "One | Two".

It does not necessary to be radio buttons, any other possible solutions are also welcome, but I want to achieve this by using CSS only.

Answer 1

尝试使用CSS选择器:last-of-type。只是，使用CSS，您可能不得不放弃最后一条边界线。

代码已在下面更新

input {
  position: absolute;
  left: -9999px;
}

/*input:first-of-type + label {
  border-right: solid 1px #000;
  padding-right: 4px;
  margin-right: 4px;
}*/

input:not(:first-of-type) + label {
  border-left: solid 1px #000;
  padding-left: 8px;
  margin-left: 8px;
}

input:checked + label {
  display: none;
}

/*label:not(:checked):last-of-type {
  border-right: none;
}*/

<html>
<input type="radio" id="one" name="option" />
<label for="one">One</label>
<input type="radio" id="two" name="option" />
<label for="two">Two</label>
<input type="radio" id="three" name="option" />
<label for="three">Three</label>
<input type="radio" id="four" name="option" checked/>
<label for="four">Four</label>
<input type="radio" id="five" name="option" />
<label for="five">Five</label>

</html>

Divide options by border lines, hide when selected

1 个答案: