CSS equivalent of DOM focus() - html

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 */
}

Related

how to code if this element activated the other element changes with html and css

I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}

Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second

One way ,I use :focus pseudo class. div:focus a {}

Use pseudo selectors in Angular Component?

I created a component with a template containing a div holding the "input"-value and an indicator showing if capslock is active. When I add the Bootstrap .form-control class to the host element, it looks pretty much like other input fields except when being focused or disabled.
Is there a way to make use of :disabled and other pseudo selectors like :focus defined in Selectors 3 when creating Angular Components?
I'm stuck with finding a good way to create form components that shares the look and feel of other input components.
Are there other (preferred) ways to make use of input stylings without having to redefine everything?
Would it be better to create a directive and "hack" the template using Renderer2?

Not sure if that's what you are looking for, but having a template like
<div class="form-control">
<input type="password" class="custom-input">
</div>
try targeting your input with a css class and style it (if you are using scss) with e.g.
.custom-input {
//some styles
&:disabled {
color: grey;
background: lightgrey;
}
}
If you are using regular css you could do something like
.custom-input:disabled {
color: grey;
background: lightgrey;
}

CSS * selector but exclude a particular tag

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>

HTML5 Required input styling

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;
}

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>