Custom CSS with Simple Form

Question

Using Simple Form (https://github.com/plataformatec/simple_form) and finding it difficult to stylize radio inputs. I want to hide the standard input toggle and replace it with an image using the 'before' pseudo-elements for the 'label'. Because Simple Form publishes the 'input' INSIDE the 'label', I cannot reach it as a sibling using CSS. Since the input is now a child of the label. Typically label and input are siblings.

Markup:

<label class="boolean required" for="rfq_nda_accepted">
  <input class="boolean required" type="checkbox" value="1" name="rfq[nda_accepted]" id="rfq_nda_accepted">
  <abbr title="required">*</abbr> I agree to NDA
</label>

CSS:

input[type="radio"]:checked + label

CSS does not support targeting parents. Also trying to avoid JS. How do I use CSS to customize these inputs similar to this look: http://codepen.io/mitchmc/pen/pebIx

Help is very much appreciated. Thanks!

Deryck · Accepted Answer · 2015-08-12 22:30:44Z

1

Don't really know why you want it only on the label. Here's how you can do it on the input itself:

#NDA:checked {
  visibility: hidden;
}
#NDA:checked:before {
  visibility: visible;
  display:block;
  width:24px;
  height:24px;
  position:absolute;
  left:0;
  top:0;
  content: "";
  background: url(https://placekitten.com/25/24) no-repeat;
}

<label class="wrap">
  <input id="NDA" type="radio" value="NDA" />I'm tired.
</label>

answered Aug 12, 2015 at 22:30

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2963256 Over a year ago

Trying to avoid any direct communication to a unique id (#NDA) because I want these input styles to be base (global) css changes. However, changing the input instead of the label is great! No idea why I was concentrating on the label. This is great help!

Deryck Over a year ago

@user2963256 I only used an ID as an example. There's no reason you can't just as easily change it from #NDA to input[type="radio"] lol glad it helped tho

user2963256 Over a year ago

And that's exactly what I did! :)

user2963256 Over a year ago

May need your help here Deryck. In Firefox a pseudo-element cannot overwrite the elements visibility. Therefore, an invisible element means its pseudo-elements (like :before) cannot overwrite with a visibility: visible :(

Joy Biswas · Accepted Answer · 2015-08-12 22:14:30Z

0

Please check out the checkbox with CSS hope this is what you are looking for .

input[type="checkbox"]{
	display:none;
}

label::after {
  content:" ";
  display: block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #ccc;
   color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
  float: left;
  background-color: #FFF;
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
label:active::after,label:focus::after {
	content:"";
	display:none;
}

label:active::before, label:focus::before  {
  content:" ";
  display: block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
  float: left;
  background-color: #292321;
}

<label class="boolean required" for="rfq_nda_accepted">
  <input class="boolean required" type="checkbox" value="1" name="rfq[nda_accepted]" id="rfq_nda_accepted">
<abbr title="required">*</abbr>  I agree to NDA
</label>

edited Aug 12, 2015 at 22:14

answered Aug 12, 2015 at 21:08

Joy Biswas

6,5551 gold badge27 silver badges50 bronze badges

3 Comments

user2963256 Over a year ago

Thanks for the post joyBlanks. The markup is dynamically generated, so I cannot that simply add a span or div inside the label. I am basically trying to figure out how to talk to the label based on the condition of the input (checked or not) using only CSS. Does that make sense? Imagine you cannot change the markup and have to speak to it just using css. Thanks.

Joy Biswas Over a year ago

Ok, If you have access to any JS you can put a span. I will not say that piece is a nice work, but it will work in FF for now. This is just knowledge do not make a practical use for above snippet. Sorry

user2963256 Over a year ago

Totally appreciate your help joyBlanks!

Collectives™ on Stack Overflow

Custom CSS with Simple Form

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related