HTML5 Required input styling - html

In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they try to submit the form without filling out a required element. Is there a selector for this? How about for the little message box which pops up?

You can use :valid and :invalid selectors. Something like this
.field:valid {
border-color:#0f0;
}
.field:invalid {
border-color:#f00;
}
However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).
So by native validation I mean that in chrome if you do <input type="email"> the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to a type="text" field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.
Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)

I've resorted to using JavaScript to apply a class of .validated to the form on submit, then use that class to style :invalid fields, e.g.:
.validated input:invalid {
...
}
This way fields don't show up as invalid on page load, only after the form is submitted.
Ideally there would be a pseudo class applied to the form on submit.

Yeah as SLaks said there is no CSS selector to do this. I would doubt this will ever be in the scope of CSS because CSS would need to check the contents of an input.
Your best option, still, is probably to call a javascript validation function when clicking a button, rather than actually submitting the form. Then checking the [required] fields for appropriate content and either submitting the form or highlighting the required fields that were not filled in.
JQuery has some nice plugins that take care of this for you
http://docs.jquery.com/Plugins/validation

There's a :user-error pseudoclass in the CSS Selectors 4 working draft that will do exactly this, firing on both input blur and form submit.
In the mean time, I'm personally using the awesome webshims polyfill library which covers :user-error, or you could hack it out yourself with something along the lines of Toby's answer.

input:required {
/* Style your required field */
/* Be sure to style it as an individual field rather than just add your desired styles
for a required field. */
}
Tried and tested in chrome. I haven't tested it in any other browser.

This solution will style input fields that are required via attribute while blank. Browsers will remove the :invalid pseudo class when populating a required field on keydown. Recent versions of Firefox automatically apply something similar to this style but Chrome and IE do not.
input[required]:invalid { box-shadow: 0 0 3px 1px red }
Try it: http://jsfiddle.net/2Ph2X/

Very simple, just add the class when the element is in focus, then during the submit it gives focus on the elements that are incorrect and the client is filling and validating one by one I believe it is the best solution without using JavaScript.
input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}

Related

CSS - How to make CSS class invalid for single element

I have a Wordpress website which contains a lot of pre-written CSS-code. One of the prewritten code-snippets looks like this:
input[type=url] {
color: #666666;
... (a lot of other styling properties)
}
Now I wanted to create a design for a single page which contains an input field of type url.
<input type="url" id="input_url" class="dtd-settings-element"></input>
The problem is, that I want to style this input field completely on my own but the pre-written code is affecting that style. Is there a possibility to "deactivate" the pre-written CSS snippet for my new input field?
I know that I can overwrite all the attributes from the pre-written snippet in my dtd-settings-element class. But doing this for multiple elements would not be optimal.
Thanks in advance for pointing me in the right direction :)
EDIT:
Last thing I tried was:
input[type=url]:not(#input_url)
You can use the unique id of the input field with !important to target that element and just apply whatever style you want...
#input_url {
color: red !important;
}
You can try to override styling.
#input_url input[type=url] {
color: #000;
font-size: initial;
...
}
Unfortunately there is no way to deactivate pre-written CSS in your terms. All the possibilities you have already mentioned:
Override all class properties
Modify original styles
Change type attribute
However you can change tag from input to (for example) textarea.

Override standard CSS for hidden input tags

For HTML tags such as <input type="hidden"> when I look at the browser's standard CSS, I see:
input[type="hidden" i] {
display: none;
}
So I added this to my CSS:
input[type="hidden" i] {
display: block !important;
}
And for HTML I have <input name=countrycode type=hidden value=US>
When I open up the developer tools I can see that the old display:none is ignored, however, the field never shows up in the page and is still hidden!
Why doesn't the browser follow my CSS rules, is there another way to force it to do so? If I add width: 200;height:200;background: black this should make it appear in the page, right?
The reason I want to do this is because I have a lot of hidden inputs in many pages that now I want them to be visible (to get input from user) so I decided to do it fast with CSS. I know this can be easily done with JavaScript, but just curious why CSS is not working or maybe it will work on other browsers but not Google Chrome?
The reason that your input[type=hidden] is hidden, is because it doesn't have a control type to show the user it's value, so your display: block; should work, but the browser'll have nothing to render. Your hidden input could be a checkbox, a text field or a number.
More info: https://www.w3.org/wiki/HTML/Elements/input
You should give that input an id="countrycode" and just use javascript to set the value of type attribute from "hiden" to "text" like this:
document.getElementById("countrycode").setAttribute("type", "text");
OR if you prefer to use the name attribute, then do this:
document.getElementByName("countrycode").setAttribute("type", "text");
Voila!

CSS equivalent of DOM focus()

I want to set the focus on a button on particular event.
The pseudo code for this can be,
if (event == "EventX") {
document.getElementById('myAnchor').focus();
}
is there a CSS equivalent for document.getElementById('myAnchor').focus();?
You can't change the state of an element using CSS. While CSS can style elements based on specific states, it cannot actually trigger those states. To do that, you use JavaScript, not CSS, since the DOM APIs are implemented in JavaScript, not CSS.
I think am getting confused here, as #Paulie commented, I think what you are looking for is to autofocus an element on load than you cannot do that with CSS, if you want, you need can use autofocus attribute on the element you want to get the focus on, like
<input type="text" autofocus />
If you want to style the focused element then you need to use :focus pseudo
input[type=text]:focus {
border: 1px solid red;
}
Demo
As I read your id it says myAnchor so you can write your selector like — to make it more specific
#myAnchor:focus {
/* Styles goes here */
}

Element not receiving style from one of its classes

Alright i have a button element as follows:
<button class='secondary row_1 col_1 not-sticky'>Button</button>
styling for secondary etc work, but it does not pick up the styling from 'not-sticky'. This is my basic styling:
.not-sticky { color:#FFFFFF; }
.sticky-state { color:#000066; }
When a button is clicked this code is run:
if ($(this).hasClass('sticky-state'))
$same = true;
//change old sticky classes to not sticky
$('.sticky-state').removeClass('sticky-state').addClass('not-sticky');
if (!$same)
$(this).removeClass('not-sticky').addClass('sticky-state');// chain our jQuery methods
Once this is run, the styling from sticky-state does work properly and the text color becomes #000066.
Also - through the use of chromes inspector i was able to verify that the classes are changing between not-sticky and sticky-state properly, just the styling from not-sticky is not showing at all
What could be making the not-sticky styling from not being applied at all?
Thanks
Here is the whole style sheet: http://staging.easyzag.com/style.css
It works in this fiddle: http://jsfiddle.net/c7XHX/
Don't know if $same was declared or not, but you always need to declare your JavaScript values.

Firefox 4 Required input form RED border/outline

I have recently developed an HTML5 jQuery plugin and I'm having trouble removing the red border on required fields in FF4 beta.
I noticed that FF applies this border/outline in required fields and removes it when value is set. The problem is that I am using the value attribute to emulate the placeholder attr in older browsers. Therefore I need all inputs with this feature to not show the red line.
You can see the problem in the demo page of the plugin here
There's some new pseudo selectors for some of the new HTML5 form features available to you in CSS. You're probably looking for :invalid. The following are all from the MDC Firefox 4 docs:
The :invalid CSS pseudo-class is applied automatically to elements whose contents fail to validate according to the input's type setting
The :-moz-submit-invalid pseudo-class is
applied to the submit button on form
fields when one or more form fields
doesn't validate.
The :required
pseudo-class is now automatically
applied to fields that
specify the required attribute; the
:optional pseudo-class is applied to
all other fields.
The
:-moz-placeholder pseudo-class has
been added, to let you style
placeholder text in form fields.
The :-moz-focusring pseudo-selector
lets you specify the appearance of an
element when Gecko believes the
element should have a focus
indication rendered.
To be more specific you need to apply that style to the input control.
input:invalid {
box-shadow: none;
}
use this code as Quick and simple solution
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
Please try this,
$("form").attr("novalidate",true);
for your form in your global .js file or in header section.
Wrap your required input into a form with novalidate attribute
<form novalidate>
<input required>
</form>