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.
Related
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;
}
This HTML code shows two checkboxes next to each other
<div id="mr_mrs">
<ul class="mr_mrs form-no-clear">
<li id="mr" class="popular-category">
<label for="Mr" id="mr">Mr</label>
<span><input name="Mr" id="Mr" type="checkbox" /></span>
<div class="clearboth"></div>
</li>
<li id="mrs" class="popular-category">
<label for="Mrs" id="mrs">Mrs</label>
<span><input name="Mrs" id="Mrs" type="checkbox" /></span>
<div class="clearboth"></div>
</li>
</ul>
</div>
I want to customize the checkboxed to square and on selecting the checkbox fill some color to it. IMAGE BELOW
How can this be done ?
To sit the two controls next to each other, set their display to inline block: display: inline-block. (Default for div is block display.)
To enable the user to check the box by clicking the label text, there are a couple options. Both are shown in the example below.
<label> is parent to the text and checkbox.
Use <label for="myId">some text</label><input id="myId"> to associate the label to the input.*
*Note: when using the for/id method, it's label-for and input-id. I noticed in the example the id was applied to both elements, an id should be unique to the page.
.checkbox {
margin: 4px;
display: inline-block;
}
<div class="checkbox">
<label>Box 1<input type="checkbox"></label>
</div>
<div class="checkbox">
<label for="myId">Box 2</label>
<input id="myId" type="checkbox">
</div>
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/
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>