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;
}
Related
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; }
I want to separate text boxes and labels and to make them all in the same width to get better look.
It is not a PHP question at first, The presentation can be done by simple css.
here is the code:
label {
width:80px;
clear:left;
text-align:right;
padding-right:12px;
}
input, label {
float:left;
}
<label>Name:</label>
<input placeholder="Enter Name here..."><br/>
<label>Place:</label>
<input placeholder="Enter Place here..."><br/>
<label>Country:</label>
<input placeholder="Enter Country Here..."><br/>
What is the best way of lining up the Remove and the input control, and not have it on a different line?
Fiddle here
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> Remove
Bootstrap is telling the input to be 100% wide...so you'd have to adjust that.
JSfiddle With Bootstrap Demo
input.form-control.booking.waypoint {
width:50%;
display: inline-block;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"/>
<label for="">Remove</label>
Try this:
#remove{
display:inline;
}
.booking{
width:50%;
display:inline;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> <p id="remove">Remove</p>
you can use .col-any class name.
For text box
col-lg-7
and for label
.col-lg-5
The example below works in Chrome but not in FF or IE. I'm trying to vertically center 'Option 1' and 'Option 2'. Can someone push me in the right direction?
HTML
<div id="polls-4" class="wp-polls">
<form id="polls_form_4" class="wp-polls-form" action="/sandbox/our-girls/" method="post">
<p style="display: none;"><input type="hidden" id="poll_4_nonce" name="wp-polls-nonce" value="eeb4f4642f"></p>
<p style="display: none;"><input type="hidden" name="poll_id" value="4"></p>
<div id="polls-4-ans" class="wp-polls-ans"><ul class="wp-polls-ul">
<li><input type="radio" id="poll-answer-13" name="poll_4" value="13"> <label for="poll-answer-13"><img src="http://i.minus.com/iCKua5u7mVHHA.gif">Option 1</label></li>
<li><input type="radio" id="poll-answer-14" name="poll_4" value="14"> <label for="poll-answer-14"><img src="http://i.minus.com/iCKua5u7mVHHA.gif">Option 2</label></li>
</ul>
</form>
</div>
CSS
.wp-polls-ul { margin:0 !important }
.wp-polls-ul li { margin-bottom:10px }
.wp-polls-form .wp-polls-ul li input { float:left;height:35px;margin-right:10px }
.wp-polls-form .wp-polls-ul li label { display:block;height:35px;line-height:35px;vertical-align:top }
.wp-polls-form .wp-polls-ul li label img { margin-right:10px }
Example: http://jsfiddle.net/tePwt/
submitted by #Passerby will generate bullets for Firefox, try this with just little modification. [http://jsfiddle.net/tePwt/5/]
#John use this jsfiddle.net/tePwt/7/ i hope this will help for u.
Extending from comment:
Add
vertical-align:middle
to img. JSFiddle demo.
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.