Dennis Dennis - 5 months ago 7
HTML Question

How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

I used an example CSS + HTML code to create a series of "page covers" that are selectable as re-designed radio buttons. Everything is working great, except when I click on some of the "covers", the row below it keeps moving instead of being stationary. How can I fix this to stop the covers from moving? Please see the example.

Running Example

Be sure to run it using

Full Page
option.


  • Click on "cover" 1, 2, 3, etc.

  • Observe the shifting row below the cover you click - it shifts and arranges itself to be after the clicked cover

  • Expected behavior: None of the covers are to move places, no matter which cover you click.



Snippet



.center {
text-align: center
}
.cover_width {
width: 200px
}
label>input+img {
/* IMAGE STYLES */
cursor: pointer;
border: 3px solid transparent;
}
label>input:checked+img {
/* (CHECKED) IMAGE STYLES */
box-shadow: 0 0 50px green;
border: 1px solid grey;
margin-bottom: 18px;
margin-left: 6px;
}

<form>
<div style="text-align:left">
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>



</div>

</form>




Answer

Don't change border size and margins when checked

.center {
  text-align: center
}
.cover_width {
  width: 200px
}
label>input+img {
  /* IMAGE STYLES */
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 18px;
  margin-left: 6px;
}
label>input:checked+img {
  /* (CHECKED) IMAGE STYLES */
  box-shadow: 0 0 50px green;
  border: 1px solid grey;
}
<form>
  <div style="text-align:left">
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>
    <label style="float:left" class='cover_width center'>
      <input type="radio" name="coverpage" value="coverpage" style="display:none;">
      <img src="http://i.stack.imgur.com/pEYzw.png">
      <br>Original Cover</label>



  </div>

</form>

Comments