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>
Related
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.
I have table in which i have input/radio buttons, and i need to make if user selects radio button in specific cell, that cell should have border, so that cell looks like selected. I dont have, any idea how to do this.
Here is example of table.
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio" checked="checked">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-3-radio" checked="checked">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-4-radio" checked="checked">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="tcr-radio" checked="checked">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
This should be done using jQuery and CSS.
Thanks for help.
This solution is at jQuery and CSS.
The border is added by the class, method addClass(). The class itself must be added to your CSS:
.current {
border: 1px solid green;
}
Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.
$('input[type="radio"]').on('change', function() {
$('input[type="radio"]').closest('td.current').removeClass('current');
$(this).closest('td').addClass('current');
});
.current {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
To get you going in the right direction at least, here are some high level ideas:
When the radio button gets toggled, there are two possible ways you can leverage that to apply a style:
a. events like click and change are fired that you can respond to with your JavaScript.
b. The :checked CSS pseudo-class selector applies to the element if it's toggled on
either by adding/removing an attribute (usually a class attribute like 'active-cell') on the event, or leveraging the native pseudo-class, you'll need to add the styles to represent a border. (Here's a breakdown of why I say 'represent' a border: Applying borders to a single table cell when using border-collapse - it's not quite as simple as adding a css border property.)
Usually toggling a class is going to dramatically simplify your HTML and CSS because you can do a bit of DOM traversal to select a parent element of the input to apply the class and it's styles to.
Using the pseudo class is nifty in that it doesn't require JavaScript, but since CSS doesn't have a 'parent' selector, and you want to style the cell containing the input you have to get creative with your selectors...that would likely be done by having the element right after the input be selected, (or maybe a :before pseduo element) and adding some positioning and other styling to make it look like a border. for example:
input[type="radio"]::checked + label::before {
/* styles will apply to label elements that immediately follow selected radio inputs */
}
First, the radio buttons from the same group shall have the same name.. Also why all buttons are checked?
To achieve what you want you can use event listeners. there are event listeners for every action and then you can change the DOM when the action happens.
So with the radio button you can create an event listener for "change" action.
$(document).ready(function(){
$('input[name="prsten-2-radio"]').change(function(){
// remove border from other cells
$('input[name="prsten-2-radio"]').parent().attr('style', 'none')
//put a border only to the selected
$(this).parent().attr('style', 'border: solid black')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-2-radio">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten-2-radio">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
Here are some resources that might help you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/events/
Good luck!
Has anyone seen an example of selecting all the checkboxes without any javascript or jquery? If so, if anyone can show me an example or a site where this has been seen?
Thank you in advance
Although this is something you should probably be using JavaScript for (few people will have it disabled, and it's very simple to add a message with <noscript> telling people to turn it on), contrary to what others are saying, I believe it is possible with a bit of CSS magic.
Here I have two sets of checkboxes that appear identical to the end user. When the "check both boxes" checkbox is checked, the ones which are pre-checked are displayed. Otherwise, the first set is displayed. On the server end, check the status of the "check both boxes" checkbox to see which set should be ignored.
#bothChecked {
display: none;
}
#bothBox:checked ~ #bothChecked{
display: block;
}
#bothBox:checked ~ #bothUnchecked{
display: none;
}
<form>
<input type="checkbox" id="bothBox"> Check both boxes<br>
<div id="bothUnchecked">
<input type="checkbox"> Checkbox 1<br>
<input type="checkbox"> Checkbox 2
</div>
<div id="bothChecked">
<input type="checkbox" checked disabled> Checkbox 1<br>
<input type="checkbox" checked disabled> Checkbox 2
</div>
</form>
#spacer-gif was faster while I was making a Codepen for you. I can only repeat what he said. This is sooooo hacky that it hurts :D
But it was fun to make.
https://codepen.io/nemanjaglumac/pen/BVKNoM
<div class="container">
<input type="checkbox" id=trigger>
<label for="trigger">
<button class="button">Button</button>
</label>
<div class="checked">
<input type="checkbox" id="firstChecked" checked>
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked" checked>
<label for="secondChecked">Second</label>
</div>
<div class="unchecked">
<input type="checkbox" id="firstChecked">
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked">
<label for="secondChecked">Second</label>
</div>
</div>
Once again, if you want full control, use JS.
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>
How can I simply move the text so it does not continue below the <input> field, without making a <div> wrap the text?
currently, my HTML is as:
<div class="answer">
<div class="control-group">
<label class="radio">
<input type="radio" id="a_0" name="a" value="86692726-ff5a-4f1f-b2f4-51a98e03eba0">
Designer Brille Mode – Brille forum på Trendsales</label>
</div>
<div class="control-group">
<label class="radio">
<input type="radio" id="a_1" name="a" value="98f07484-5e65-47fc-bb46-b9a59125bdd2">
Design by Me – unika og hjemmelavede annoncer på Trendsales</label>
</div>
<div class="control-group">
<label class="radio">
<input type="radio" id="a_2" name="a" value="248e7343-ddf7-4d61-94fa-e5425fa5f54b">
Dansk Børne Mode på Trendsales</label>
</div>
</div>
And I'm using Bootstrap CSS Framework, a Live example can be found in JsBin.
First step: don't wrap the input with label.
Second step: change the default display for input & label to block, set width and float them.
So the CSS will be something like:
.answer {width:200px;overflow:hidden;}
input,label {display:block;float:left}
input {clear:left;width:16px;}
label {width:184px;}
Demo: http://jsfiddle.net/6v8Dc/
instead of regular space or display: inline-block;
Demo
Hi now used to white-space nowrap as like this
.control-group {
white-space: nowrap;
}
Demo