When I am looking at a checkbox based on Bootstrap 3 class "checkbox" in IE Development Tools the display is set to block, as:
display:block;
When I uncheck the box in front of the display:block it now has cross-over line. Now the checkbox looks exactly how I want. So I need to specify in the inline style the value for display that is equal to the crossed over display:block being unchecked. I tried different values for display in the inline style but nothing works. What do you suggest I set as the value for display in the inline style?
Here is the segment of the code:
<div class="checkbox" style="min-height:20px;padding-top:3px">
<asp:CheckBox ID="chkCloseWo" runat="server" CssClass="checkbox" />
</div>
Here is the HTML code:
<div class="checkbox" style="min-height:20px;padding-top:3px;display:inherit">
<span class="checkbox"><input id="MainContent_chkCloseWo" type="checkbox" name="ctl00 $MainContent$chkCloseWo" /></span>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected. For example, I have two checkboxes
Checkbox 1
Checkbox 2
When checkbox 1 is selected, it's suppose to hide checkbox 2 but it doesn't. Any ideas on what I'm doing wrong?
Here's what I've done so far
#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}
<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
You cannot choose a higher level in CSS.
For this, you must set the <input> and the <div> you want to hide to at least the same level.
So we will need to save the <div id="cover_photo_set_featured"> element from being the parent of .
But since I see that you are using ACF, I add the input right in front of it to be able to select it with CSS, so you can easily select the next <input> with the "+" selector.
We can now give "display: none" and "aria-hidden" attributes to <div>, which is used purely for help.
#cover_photo_set_featured {
display: none;
}
#cover_photo_set_featured+input:checked~#one_image_feature_image label {
display: none
}
<div id="cover_photo_set_featured" aria-hidden="true"></div>
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
Here is my radio button code in struts tag, the space between radio button and radio button text box is congested how to give space between them
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="btn-group" data-toggle="buttons">
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" />
</div>
</div>
</div>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
I know this is an old question but to do this in Struts 2 use the cssStyle attribute if you only want it to apply to this group of radio buttons.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssStyle="margin-right:20px" />
Or you can use the cssClass attribute.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssClass="radioMarginRight" />
with
.radioMarginRight{
margin-right: 20px !important;
}
Both of these apply the CSS to the radio button and the label. To keep the margin from applying to the label with the cssClass attribute you could define the following CSS to set the label margin to 0.
label.radioMarginRight{
margin-right: 0px !important;
}
I dont know struts, but looking at this have you tried:
list="{' Male ',' Female '}"
Just putting some spaces between each of the '.
Its what you do in HTML + CSS so might work there
I have html code that I cannot change.
I cannot use JS for help. So the only option is CSS. example here:
https://jsfiddle.net/4gKPL/
HTML:
<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>
</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
<select name="sth" required>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select> <span class="selectedValue"> </span>
<span class="is-visually-hidden">select to open the list</span>
</div> <span class="error-message">This is an error message</span>
</div>
CSS:
.complete:after {
content:'OK';
}
I need to display additional content (in this example 'OK') for input fields but not for select.
Spans after interactive components are optional so don't have to exist.
Any idea about how define this selector?
Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.
.complete input[type="text"] + .error-message:before {
content:'OK';
}
See this jsFiddle for a working example.
EDIT
The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.
I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.
I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.