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.
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 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; }
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
I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Here is an example: http://jsfiddle.net/cqscc48g
There is any way to achieve that?
Thanks
Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.
You have two options:
1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )
JsFiddle - Changin HTML
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<footer>
<div class="colorDiv"></div>
</footer>
And then you can select:
#select2:checked ~ footer .colorDiv{
background-color:green;
}
#select3:checked ~ footer .colorDiv{
background-color:blue;
}
2 - Use a Javascript approach:
If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:
JsFiddle - Using Javascript
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
Change your markup and go through comments in code,
.colorDiv {
width: 50px;
height: 50px;
background-color: red;
}
#select2:checked~.colorDiv {
background-color: green;
}
#select3:checked~.colorDiv {
background-color: blue;
}
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<div class="colorDiv"></div>
<!-- this should be adjacent as per your css selectors -->
</section>
Fiddle
If you want click inside somewhere div and hover any of body div than set input at the top outside..
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox]:checked ~ div.content{
display:none;
}
</style>
<input type="checkbox" id="toogle-content"/>
<div>
<label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
I can toggle now ;)
</div>
Use .change() for every input. On change check id from clicked input and then change color of that div
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.