CODEWITHSUNDEEP
jqueryhtmlcss
user2963256
user2963256

Reputation: 31

Custom CSS with Simple Form

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!

Upvotes: 1

Views: 233

Answers (2)

Deryck
Deryck

Reputation: 7668

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>

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

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>

Upvotes: 0

Related Questions