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>
Related
Background
So I found this line of code in our Ext JS's css which removes focus for every element in webkit. Unfortunately it has been almost 2 years and they still haven't addressed their TODO.
// TODO: remove outline from individual components that need it instead of resetting globally
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
which compiles to
.x-webkit *:focus {
outline: none !important;
}
What this does is take away the browsers default focus (UA styles) on links so when the user tabs to an anchor tag they have no UI indication that they are on the tag. I want to use native browser behavior so I don't want to override the a:focus in particular and using initial doesn't work. Also removing the entire style causes UI components to handle their focus UI differently which is not acceptable.
tldr
What is the best approach for applying a style to all tags except a certain tag(s). I know I can make a selector that has all of the tags except the tag I don't want but that is tedious, is that really the best approach ? If so is there a list of valid UI tags for HTML ?
You could use the CSS :not selector, and apply a style to all descendants of .x-webkit except the tag(s) you want to exclude:
.x-webkit *:not(p):not(em) {
color: red;
}
<div class="x-webkit">
<div>red</div>
<ul><li>red</li></ul>
<p>
Not red<br>
<strong>red</strong><br>
<em>Not red</em>
</p>
<table><tr><td>red</td></tr></table>
</div>
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 */
}
I have been trying to get Custom checkboxes to work with my site. However, I've run into a puzzling issue with a specific part of my HTML.
Here is my current code:
HTML
<div class="quicklinks_login">
<label for="cookieuser" style="padding-left: 7px;"><input type='checkbox' name='cookieuser' value='1' tabindex='10' id='cb_cookieuser_navbar' accesskey='c' /> Remember Me</label>
</div>
CSS
input[type="checkbox"] + label,
label > input[type="checkbox"] {
background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
}
Now, as you can see from my CSS, I have two patterns that I want to be styled. The label > input[type="checkbox"] 'pattern' should be applied to my HTML (which it is, according to FireBug). However, the custom image does not display with the checkbox.
To sum it up, my question is simple: Why is the 'pattern' label > input[type="checkbox"] not working for my HTML?
You can customize checkboxes and radio buttons with just CSS if you prefer. https://www.google.com/search?q=css%20only%20custom%20checkbox . The basic idea is to style the label and hide the actual checkbox. Clicking on the label sets/unsets the checkbox, so all the form functionality is retained. The only downside is that old versions of IE require a graceful fallback, which most of the solutions provide.
This is one of those elements what browsers tend not to let you style
that much, and mostly people replace it with javascript.
answere on SO by #levente-nagy
My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function
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;
}