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

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?

Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/ I hope it can be usefull for you. Code below: body { background: #ECF0F1; } .clear { clear:both; } .nav { width:100%; float: left;...

How to style easypiechart using CSS?

Try this div { width: 150px; height:150px; display: block; border-radius: 50%; background-color: #EC5F51; border: 2px solid #EC5F51; margin: 50px auto; position:relative; background-image: linear-gradient(180deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%,...

Meteor how to serve multiple css for different media types?

/packages/meteor/package.js defined that .css files should be bundled. However, taking a close look at docs.meteor.com, we can find this information: CSS files work just the same: the client will get...

How to override CSS

Use box-shadow:none to reset the box-shadow to the defaults. See this source for information about the box-shadow property. All properties can be "resetted" by defining the same property, and using...

how can i change the style of scroll bar

As of now there's no cross browser solution to change the scroll bars with CSS ONLY, alternatively you can use jQuery to style them. Solution for webkit browsers only Demo...

How do I get CSS table columns to line up?

It is something to do with your sprite and the background-position values you set. I made a fiddle for you and it seems okay.

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

You need to include the descendant combinator (the space): form :nth-child(3) { /* CSS */ } Without the space, you're selecting the form-element if it's the third-child of its parent,...

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

I finally got it to work. The default url when sharing the css file was https://drive.google.com/file/d/XXXXXXXXXX/edit?usp=sharing In fact I just needed to change it into https://googledrive.com/host/XXXXXXXXXX To make it work...

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

What about using inline-blocks instead of floats? http://jsfiddle.net/6qZnk/1/ Unfortunately, if your blocks have to touch each other horizontally, inline block is not the best solution...

How to bottom center a span inside a list item

Does this help? .page--game-core_bottom .tabs li { position: relative; /* Set as a reference point */ } .page--game-core_bottom .tabs li span{ /* margin-top: 10px; */ position: absolute; bottom: 0; left:...

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

You can do it purely with css by adding this to your existing code: #record { -webkit-transition: left 0.5s ease-out; -moz-transition: left 0.5s ease-out; -ms-transition: left 0.5s ease-out; -o-transition: left...

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

The first link isn't red because there's no preceding element to refer to, and there isn't a CSS selector that can do this. See Is there a "previous sibling" CSS...

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

Just vertical align the direct children of the container, in your case this will do the job: .menu > div { vertical-align: middle; } ...

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

SOLVED: http://jsfiddle.net/smUx8/4/ All you need is some position: fixed and a margin-top...

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

Not entirely sure what you want, but is this the effect you're going for? .divider { border-bottom: 1px solid #c3c3c3; clear: both; display: block; margin-bottom: 20px; padding-top: 20px; width: 100%;...

How to set control properties in css?

Assuming you're talking about properties such as: TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White" ... etc.. Your best bet would be to render the calendar to a page, check its source and see what style...

How to include stylesheet file only for one div?

Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1...

How to create a rounded rectangle shape Css?

This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want. <style> #pic { position: relative; width: 130px;...

How to pause css animation at orginal state

You can add animation-fill-mode. In your case you probably need: animation-fill-mode: none; Find more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode...

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

When multiple images are added as background to an element, CSS would by default place them all in the same starting point. So, they will overlap one another. The background-position...

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

I use grunt-sass as well and my usual SASS config looks like this: client: { options: { loadPath: ['<%= config.tmp %>/styles'], compass: false }, files: { '<%= config.tmp %>/styles/main.css': '<%=...

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

Well someone else posted an answer but then deleted it so... The dependency I was using here wp_enqueue_script( 'js-code', get_template_directory_uri() . '/js/js-code.js', array( 'jquery', 'jquery-ui-widget' ) ); was wrong; I...

How to overlap images in the header section?

Use a div with a image as background, then let the other image (and the header's content, if you have it) inside the div. Example: body { width: 100%; height:...

How to center this flip card example?

As bad as tables are, they are an easy way to vertically center stuff. See updated fiddle with table to contain multi-line text that is vertically centered inside the flip...

How to get the navigation bar to align to the center

text-align will not affect floated elements. However it will affect inline elements. Change: li { float: left; } To: li { display: inline-block; } JSFiddle demo. Thank you, but there...

How to animate back after click with CSS?

You are associating the style with :focus so on click of the item it will stay the same, until you click away. Change the following .hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before { to...

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

This is because of Bootstrap's container class. Bootstrap has a row class that cancels out the container class' padding. You can do something like this: <section class="container"> <div class="row"> <!--...

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

The conclusion that I have come to is that this may not even be possible. I went with an alternate method of using jQuery.resizable to do it manually instead.

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

I suggest to put picture as a background. jsfiddle #t{ background: aliceblue; display: table; width: 300px; } .r{ display:table-row; } .c{ display:table-cell; border:solid black 1px; background: aqua; vertical-align: middle; position:...

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

The dynamic behavior in any web application can be expressed by using server side code, and/or client side code. In the client side there is a combination of techniques called...