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.
Related
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>
When I apply ::after for my <p> element, it works fine, but when I use it for the ::placeholder pseudo-element on my input fields, it doesn't work:
p::after {
content: "*";
color: red;
}
#registerFirstName::placeholder::after {
content: "*";
color: red;
}
<!DOCTYPE html>
<html>
<body>
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<p>I live in Ducksburg</p>
</body>
</html>
Output:
Can someone help me fixing this?
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
However if using jquery you can use
$(".mystyle").after("add your smiley here");
Psuedo elements do not work on empty elements such as <input>.
There are two problems with your code.
First, the pseudo elements can be set only for elements. Not for other pseudo elements.
Second, as others already mentioned, generated content pseudo elements (::before and ::after) are not supposed to work on empty elements (those that have no content between start and end tags in the markup) and usually they don't (there are some exceptions, but, IIRC, the only browser that allowed these pseudo elements for <input> was Opera with Presto engine).
So to add the asterisk in a cross-browser way, you need an extra element. For example, you can do the following:
/* selecting spans immediately following anything with the "placeholder" attribute */
[placeholder] + span::after{
content:"*";
color: red;
}
<input id="registerFirstName" tabindex="1" name="registerFirstName" title="" alt="" value="" required="required" maxlength="40" aria-required="true" placeholder="First Name" class="error" aria-invalid="true" type="text">
<span></span>
UPD: Sorry, I missed the part that the asterisk should be next to the placeholder text at first. Unfortunately, it's impossible with CSS. But you can use the floating label pattern instead of the placeholder, which makes it possible to add the asterisk in the needed place with ::after pseudo element, and also improves the accessibility of the form in comparison to the bare placeholder solution.
What's the best way to make the border around a fieldset more snug to a textarea? Consider:
<fieldset>
<legend>Note Edit</legend>
<textarea rows="30" cols="80" id="myTextArea">
</textarea>
</fieldset>
...unfortunately, the right-hand fieldset border extends all the way to the far-right of the browser screen, leaving a gap between the right-hand borders of the textarea and the fieldset.
What's the best way to resolve this? W3School's fieldset tag reference doesn't mention anything about sizing fieldsets or their borders.
Using IE9 on a Win7 machine.
Just add the following CSS:
fieldset {
padding:0;
display:inline;
}
The borders of the fieldset are almost 'attached' to the textarea.
You can see this here-> http://jsfiddle.net/Cu2Nv/1
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)
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}