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


Tags: html,css,css-float

Problem :

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>



Solution :

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>


    CSS Howto..

    Sidebar, Navigation and Content how to do it?

    How to style easypiechart using CSS?

    Meteor how to serve multiple css for different media types?

    How to override CSS

    how can i change the style of scroll bar

    How do I get CSS table columns to line up?

    CSS - How to select nth-child of form element?

    How to use a Drive hosted css to customize the receiver?

    CSS float: how to form the second row based on tallest DIV?

    How to bottom center a span inside a list item

    How To Slide One Image Out From Behind Another On Hover?

    CSS selector: How to select element sibling AND element itself?

    How to center verticaly n inline containers with different font-size?

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    CSS- How to align background image over bottom border line? Jsfiddle included

    How to set control properties in css?

    How to include stylesheet file only for one div?

    How to create a rounded rectangle shape Css?

    How to pause css animation at orginal state

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to use grunt sass to compile and compress scss to css?

    How to add JS to Wordpress and reference CSS or other scripts?

    How to overlap images in the header section?

    How to center this flip card example?

    How to get the navigation bar to align to the center

    How to animate back after click with CSS?

    How do I remove the side padding in the following case?

    How can I make jQuery's draggable function expand the container?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    I have the CSS & JS, how do I convert that to erb for my Rails app?