Input and button inline - html

Is there a multi-browser way to inline input and button? See http://jsfiddle.net/wf592/. Input appears below button. Simple margin doesn't help:
<div>
<input type="text" style="margin-top:-50px;" /><button style="height:25px; width:20px" />
</div>
This error showed up when I used jQueryUI calendar: calendar button is automatically inserted after the input tag. So I don't want to change markup with more divs.

Demo Fiddle
Add:
input, button{
vertical-align:middle;
}
More on vertical-align from MDN:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.

Related

Align a checkbox input and a <p> tag in the same line

I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
And I'm setting display to be inline-block for terms-checkbox like so:
.terms-checkbox {
display: inline-block;
}
However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?
Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/
edit: fixed indentation.
You must set the terms-checkbox class to input or p tag. Not their parent.
Means your input and p tag must be inline-block
<p><input type="checkbox" required/>I accept the Terms and Conditions</p>

Why is display block not working on input field focus?

I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!

Valid to have span around legend in a fieldset?

I'm trying to style the legend in a fieldset and im running into a lot of troubles. As my site is responsive and the legend text length varies I can't achieve what I want consistently with margins, relative or absolute positioning.
<fieldset>
<legend>Title</legend>
<label>Label</label>
<input type="text">
</fieldset>
All I need is for the legend to behave like a normal block level. The only way ive found to do this is to wrap the legend in a span. Is this valid HTML? Im assuming that there arn't any CSS only solutions?
<fieldset>
<span>
<legend>Title</legend>
</span>
<label>Label</label>
<input type="text" />
</fieldset>
A legend element is only valid as the first child of a fieldset element. See the spec here.
I've created a fiddle here with your code that wraps the <legend> element in a <span>, and it causes an error in the W3C validator.
Another solution is to use CSS to hide the legend from view:
legend { display: none; }
Then you can create and style your own custom headings for the fieldset.

Custom checkBox with midle alligned label text

i have a custom checkbox markup with label warped please check this link
jsfiddle.net/jhCH2/4/
I need to middle align the lable text with respect to the check-box div.
please note that the learn more link should be outside label element and same line of label.
you cannot vertically-align-middle a paragraph next to a check-box.....
Label tag is for labels, not paragraphs, you should use <p> instead....
For middle alignment of label not a paragrap use :
label{
vertical-align: middle
}
demo here
EDIT
indented demo
You'll have to use float:left to indent the text.
Also, since you have absolute positioned divs, move the input out of label to indent it, like :
<input type="checkbox" name="cb" />
<label for="cb"></label>

CSS not applied to all elements

I generate the following HTML with Django:
<p>
<label for="id_username">
Username:
</label>
<input id="id_username" type="text" name="username" maxlength="30"></input>
</p>
... and use the following CSS code to try to decorate labels and text inputs:
form.registration p label,
form.registration p input
{
width: 250px;
}
In the end, the navigator (Firefox) only changes the width of the input text boxes, but not the one of the labels. Does anybody know why?
Generally, the default display for label in most browsers is display: inline. This means that a set width will not effect any changes. Add display: inline-block to the properties (this won't affect the <input>, which are already display: inline-block)