I need to hide this field "estimated move-out date". How can I do it with CSS?
<p class="mphb_sc_search-check-out-date frm_form_field">
<label for="mphb_check_out_date-mphb-search-form-5eb2a4b467b3b">
Estimated move-out date <abbr title="Formatted as dd/mm/yyyy">*</abbr>
</label>
<br>
<input id="mphb_check_out_date-mphb-search-form-5eb2a4b467b3b" data-datepick-group="mphb-search-form-5eb2a4b467b3b" value="" placeholder="Estimated move-out date" required="required" type="text" name="mphb_check_out_date" class="mphb-datepick mphb_datepicker is-datepick" autocomplete="off">
</p>
So far I've tried the following but it doesn't work:
.mphb_sc_search-check-out-date frm_form_field { display: none; }
Tried also:
.mphb_sc_search-check-out-date.frm_form_field { visibility: hidden; }
Worked. Except it left a big blank hole in the middle. Not ideal but...
Finally I figured it out!
.mphb_sc_search-check-out-date.frm_form_field {
display:none !important;
}
Create a new class and add it to the element.
.display-none { display:none; }
Related
I need to hide a label with CSS
<p class="half_form ">
<label for="property_bathrooms">Bathrooms (*only numbers)</label>
<input type="text" id="property_bathrooms" size="40" class="form-control" name="property_bathrooms" value="0"></p>
I am trying to use:
label [for="property_bathrooms"]
{
display:none;
}
As seen in other question but is not working for me.
Any help is very appeciated.
Try to remove space after label
label[for="property_bathrooms"] {
display:none;
}
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I have a checkbox input control and I have a CSS file which includes the following declaration:
input[type="checkbox"] {
display:none;
}
I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule(display:none;) on one of my controls?
All you need to do is target that specific checkbox and give it a display of initial.
You haven't provided any HTML so I'm going to have to make up a generic example:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"].bar {
display: initial;
}
<input type="checkbox" class="foo" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="baz" />
You can simply do something like:
input[type="checkbox"]:not(.this_one) {
display: none;
}
Note: Replace this_one with the ID or class of the one you want to exempt(leave out)
See working example here
As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:
input[type="checkbox"] {
display: none;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />
Just use a class to add this css property (and possibly others) and omit the class for the needed element
input[type="checkbox"].yourClass
{
display:none;
}
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike"> The one without the class
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!