I'm struggling creating a CSS style.
This is what I've got: http://jsfiddle.net/WhNRK/26/
It was designed for a label, but now I'm trying to modifying for something like this:
<input type='radio' name='mcq' id='radio-choice-1' value='1' />
<div class='container'>
<label for="radio-choice-1" onclick="">Choice 1</label>
</div>
So if I did this, I broke up the design. Someone can help a little bit? This is a radiobutton style for an iPad.
Change the CSS selector to match your new markup:
#question input:checked + div > label {
Demo
You just remove #question input from your css and make the name of #question label as #question label.
Change the code as follows:
<div id='question'><form name='mcForm'>
<div class='container'>
<input type='radio' name='mcq' id='radio-choice-1' value='1' />
<label for="radio-choice-1" onclick="">Choice 1</label>
</div>
</div>
Related
I'm trying to make the background color of my label changing when I click on my radio button.
However I've tried a lot of solutions that other people have tried, but it seems to doesn't work with my code.
Here the code I have in my CF7 :
<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label id="label1" class="custom-label" for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label id="label2" class="custom-label" for="madame">Madame</label>
</div>
[select genre "Civilité" "Monsieur" "Madame"]
[text* last-name class:champ-text placeholder "Nom*"]
[tel* phone class:champ-text placeholder "Téléphone*"]
[email* email class:champ-text placeholder "Email*"]
[response]
[submit class:envoi-devis class:particuliers "Envoyer ma demande de contact"]
</div>
I have got some CSS to style the form, but the important one is :
input[type=radio]:checked + .custom-label {
background-color: red;
}
I've tried also ~ instead of the + sign but still not working.
Tried also to add a class in JS to the label with an onclick, but same.
If you have any tips, I would be grateful (Sorry if I made some mistakes in my english, it's not my native language)
Not intended as an answer - this is simply to illustrate the css works as expected.
input[type=radio]:checked + label {
background-color: red;
}
<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label for="madame">Madame</label>
</div>
</div>
I've some radiobuttons: Good, Better and Best.
I want to change its appearance to a rectangle button.
Like this:
Codepen:
https://codepen.io/ogonzales/pen/dyvvjgx
Code:
<div class="fps-budget" data-fps-budget="good">
<input id="fps_good" type="radio" name="budget" value="good" class="visually-hidden">
<label for="fps_good">
<img data-fps-budget-img="" src="//cdn.shopify.com/s/files/1/0408/5792/7834/files/Good_29ea1531-4b74-4ead-be87-8f053f8efc96_320x140.jpg?v=1601266077" alt="Good.">
<span class="h3">Good.</span>
</label>
</div>
CSS you can put this.
input[type=“radio”] {
display: “none”
}
Then you can change the style of the label.
As you can see in the image below, the table contents are so long and the last td content is hideous. (Sorry for local language, but trust me, the content is not important.)
What I want is hide checkbox titles using only CSS. It's very hard to not output title 'cause it's rendered automatically by a well-encapsulated module. And I don't want to tamper with it. I was successful to add hide-title class to input itself as follows:
Is it possible to hide checkbox text only using this advantage?
Following is my html:
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
and each tdhas an id starting with result_box__is_duplex. I believe the template uses Bootstrap v3.0. Thank you for paying attention.
You could use an attribute starts with selector - [attr^=value] to target the td you want:
td[id^="result_box__is_duplex"] .checkbox label {
font-size:0;
}
<table>
<tr>
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
</tr>
</table>
Are you able to add the .hide-title to the label element and not the input element? You can then use this, but it's still quite hacky.
.hide-title {
font-size: 0;
}
I have a suggestion.
Let's change HTML structure a little bit different.
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"/>
<label id="label_id" for="checkbox_id">Text</label>
</div>
</div>
</td>
then you can apply CSS there the way you expect
/***** CSS ******/
label#label_id {
display: none;
}
You can try the below code.
<label style="font-size:0"><input type="checkbox" id="check1">Option 1</label>
I have an issue. I am trying to create a single line that contains a radio, a label, and a clickable icon and I want all of these elements to be inline. I want it to be set up like:
Radio Label Icon
in that order. My code HTML looks like this:
<div class="wrapper class>
<div class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</div>
</div>
I have tried to place the icon outside of the label class, but it does not display inline and I have also tried to use display:inline; in my CSS code, to no avail. I am trying to just separate the icon and the label, but I cannot seem to get this to work.
Any and all help would be greatly appreciated!
Thank you in advance!
Change the div class="radio" to an span:
<div class="wrapper">
<span class="radio" label="this is my label">
<input type="radio" value="1" required>
<i class="material-icons" ng-click="some-action">info_outline</i>
</span>
</div>
https://jsfiddle.net/qq3nLwp3/
And improved with some css:
div.wrapper input, div.wrapper i { {
vertical-align: middle;
}
I want single space between the text and radio button. To achieve this I tried the css class answerBottomYesNo by adding margin-left: 7px . for some reason it did not work.
Below is code snippet
<div class="questionRow odd">
<div class="question">
Ear Aches?
</div>
<div class="answers">
<label for="rbEarAches1"><span class="answerBottomYesNo" ><input type="radio" id="rbEarAches1" name="EarAches" value="true" data-bind="checked: EarAches">Yes</span></label>
<label for="rbEarAches0"><span class="answerBottomYesNo"><input type="radio" id="rbEarAches0" name="EarAches" value="false" data-bind="checked: EarAches">No</span></label>
</div>
</div>
What should I do to give a space between the radio button and text. I could have done nbsp but I really want this to reside in the CSS file. Help appreciated!
Instead of span, add margin to input type=radio inside the span like this:
.answerBottomYesNo input[type="radio"]{
margin-right:20px;
}
See the working fiddle: https://jsfiddle.net/4ageousp/