I'm currently trying to make my application more keyboard/visually friendly for a user. I added a few features that will provide a better visual indication for the user but I noticed when using the buttons it's difficult to see when the button is currently highlighted when tabbing down the application.
Example
As shown in the example, we can see that the button on the left is highlighted. However I would like it so either the highlight feature is a different cover or is bigger so the user can see that is the case.
<button class="btn btn-blue" ng-click="handleCreate()" ng-show="isNew" ng-disabled="detailsForm.$invalid">
Create
</button>
I would assume I need to modify the css, but I'm not too sure how to achieve that or what tags I would need. Any suggestions?
For that there is :focus selector. (Read more)
button:focus {
background: #ff0000;
}
<button>TEST1</button>
<button>TEST2</button>
<button>TEST3</button>
Use :focus rule.
For example:
.button:focus {
border: 1px solid red;
}
Related
I've made a sign up form with a submit button at the bottom. When deploying the code on the website, the button appears to have an unwanted grey background colour but only in a WordPress article. When tested outside WordPress, it appears fine. It seems WordPress changes it for some reason. Does anyone know why this might be?
This looks like an issue with specificity. In CSS, if you have not given style to your button element, it will inherit the style of the parent element. For example: If your "article" class contains a style for button elements...
.myArticle button {
background-color: #232323;
color: black;
}
Your button in that article, if not given its own id/class will receive that style. To change this, simply give your button its own id/class.
For example:
#myButton {
background-color: "color";
color: "color";
}
Furthermore, looking at the image you linked to. The reason the two buttons are styled differently may be to do with the input type. In CSS you can also select inputs by attribute. Example:
.myArticle input[type=submit] {
background-color: #232323;
color: black;
}
Either way, I would just consider giving the button you're having trouble with, an ID. From there you should be able to manually style it. ID's are one of the most specific selectors, no styles should overwrite that. Hopefully I've understood your question correctly, and this helps.
Is there a way to change the blue highlight color when hovering in a drop down menu? I'm using the drop-down list on my page. I have a drop down menu that allows you to choose the topic.
I would greatly appreciate any help or feedback on this topic.
That blue colour is called an outline, and is used for accessibility reasons.
For example, when you press the tab key to move between form elements, an outline is commonly used so the user knows what element is currently selected.
You can remove this outline with the following CSS:
select:focus {
outline: none;
}
However, It is not recommended to remove this. If you must, you should provide an alternative style by using a background colour, changing the text colour, or provide a custom outline instead of the browser default.
ex:
select:focus {
outline: 2px solid red;
}
.dropdown-item.active, .dropdown-item:active {
background-color: red;
}
These are the Bootstrap classes that need to be overwritten if you wish to change the highlighted background colour when you hover over the dropdown item (i.e. when it is "active").
The classes can be discovered by opening up the Elements section within Google Dev Tools (F12) and then highlighting the element that you wish to restyle. Finding the active states of classes can be a little more tricky and may require a little more digging into the HTML.
I do not know if it is a bug or not, but it seems to be.
When you have a default button and you click it when you have a :focus pseudo class it does not seem to have an outline.
#buttontag:focus {
}
<button id="buttontag" type="button">Focus me</button>
It shows the outline when you use tab key, though.
Nevertheless, it shows the outline both when clicking or using tab key on the button if you change the background-color to it.
#buttontag:focus {
background-color: #dde;
}
<button id="buttontag" type="button">Focus me</button>
But it does not work for all types of background-color. For example, it does not work for background-color: #ddd. In this case it is only shows when you use tab key.
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
Here an screenshot when the button is focused, nothing changes.
I know that the background-color: #ddd is the same colour as the default border of the button (both on focus or not focused). I have created the following code to be sure of it.
var buttontag = document.getElementById('buttontag');
buttontag.onfocus = function(){
var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);
}
var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
I know that rgb(221, 221, 221) is the same as #DDDDDD on hex and that is the same as #ddd. I do not know if it has to be something related about contrast between both colours (there is no contrast because they are the same colour) and outline but it is very strange that in this background-color the outline does not appear.
More and more strange
If you inspect the default button and you force it to be focussed (I am trying on Google Chrome debugger) , it has an outline and shows it on the button. It is the default outline that appears in the rest of buttons with another background-color.
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
And I also wanted to know if it was something related about forcing the button to be in focus state so I created a Javascript snippet to see what outline the button has in focus state.
var buttonFocus = document.getElementById('buttontag');
buttonFocus.onfocus = function(){
var outline = window.getComputedStyle(buttonFocus).getPropertyValue("outline");
alert(outline);
}
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
It retrieves the default outline, but does not show it. It seems that it only shows the outline if you force the button to be focussed (on the debugger).
I have searched on the official documentation but could not find anything related about a special behaviour for default buttons or specific background-color.
So here I have some questions:
Why is the outline not displayed on the default button when you click on it?
Why with background: #ddd it is not shown also?
Why is the outline shown when you use tab and not when you click on the button (on the two cases above)?
Why the button has the outline in his CSS but it does not display it? Is it a bug?
Might be wrong.
The default button (in Google Chrome at least) uses appearance
style attribute:
button {
-webkit-appearance: button;
}
The appearance property allows you to make elements look like a
standard user interface element from your operating system. Talking about OS X, standard interface buttons do not have outline
by default.
Very easy way to check how the standard os buttons looks:
alert('I am standard button')
When you've created a button:focus pseudo-class that contained
background or border rule (example #2), you have overridden the
standard appearance by default browser style for button + your
rules.
In example #1, the button:focus is empty, and apparently it is
just ignored by the browser, hence os interface style is applied.
If you will create a style:
button { -webkit-appearance: initial; }
you will get default browser button that has outline.
Chrome's default style for button has a rule:
background-color: buttonface;
Safari and Google Chrome support custom color names that are
references to the currently used colors of user interface elements.
It might be the case, that buttonface is '#dddddd' in your system. Interesting though, as I can see the blue outline in OS X Chrome.
For the questions 3 and 4, I am afraid I cannot replicate it, as I do get outline.
Will update the answer after some research. Cheers! :)
webkit Chrome and Safari behave differently, in that they do not trigger :focus on a click event, but do on tab keyboard event.
That :focus behavior is present, especially on the button element.
So you might have to add tabindex attribute on your button element to let the browser know that this element can receive focus.
tabindex="0"
Since without that tabindex attribute, the browser sees that focus flag as being false, hence no :focus.
See W3C spec:
https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
Also see the following regarding focused browsing context
https://html.spec.whatwg.org/multipage/interaction.html#currently-focused-area-of-a-top-level-browsing-context
If the attribute is omitted or parsing the value returns an error.
The user agent should follow platform conventions to determine if the element's tabindex focus flag is set and, if so, whether the element and any focusable areas that have the element as their DOM anchor can be reached using sequential focus navigation, and if so, what their relative position in the sequential focus navigation order is to be.
Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:
a elements that have an href attribute
link elements that have an href attribute
button elements
You can also see this related StackOverflow question:
css focus not working in safari and chrome
button has a default style define by each browser. it might (and often is) different from browser to browser. But we can overwrite the default values to suit our needs.
Why is the outline not displayed on the default button when you click on it?
The button doesn't enter in focus state when you click. It enters the active state.
Why with background: #ddd it is not shown also?
It does show in my browser, but only when in focus. I your examples you use #ddd and #dde which are 2 very similar grays to the default gray, but once I changed the value I could see the difference.
Why is the outline shown when you use tab and not when you click on the button (on the two cases above)?
The focus state is meant to allow the user to hit the Enter/Return key to activate the button. However, the button doesn't enter the focus state one it is clicked
Why the button has the outline in his CSS but it does not display it? Is it a bug?
It is not a bug. It only displays when in focus state, which can be forced through the code inspector, via javascript or by tabbing through form elements. I used my own example declaring:
outline: 2px solid #ccc;
The focus state is very useful when trying t make the application/website accessible to screen readers for people who are visually impaired. It allows us to add more functions that can be triggered in those situations, and to guide the user through the page when looking at it isn't possible.
The default browser behavior is to show an outline only on focus (by using tab f.e.), not on click. Each browser also may have it's default outline color and width.
To avoid any funny behavior you can overwrite the outline, and also add it to a click:
#buttontag:focus, #buttontag:active {
outline: #ddd solid 2px;
}
It's just a simple question. I made a button using <a> with background image. It should use different image when it is clicked. I use :active property in its css. But the thing is even after the button is not pressed (release), the :active class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?
For my website I will need to use <span> instead of <a>, because I am using mostly ajax and thus instead of links I have onclick ajax events as attributes in my spans.
As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will I need to use javascript? Or can I do that using css?
Also, I have just realized: I could not just use the <a> tag anyways instead of <span>, but just instead of an href, I would include an onclick? It should work just the same, no?
span {
cursor:pointer;
color:blue;
text-decoration:underline;
}
Hyperlink<br />
<span>Span</span>
Additionally, you can use :hover pseudo-class to style the element when hovered (you can use any styles not just the ones originally used). For example:
span:hover {
text-decoration:none;
text-shadow: 1px 1px 1px #555;
}
Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.
You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:
Link
than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.
Than you don't need to bother with span hover and anything - but just for the sake of it
span:hover {
cursor:pointer;
}
will enable hover hand cursor on hovered span.
Option1
Just use an anchor link as follows:
Link
Option2
I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.
span {
color: #000000; /* Change this with links color*/
cursor: pointer;
text-decoration: underline;
}
span:hover {
color: #444444; /* Change the value to with anchors hover color*/
}
Just add cursor:pointer; in your span css.
Use CSS to display the cursor as a pointer:
<span style="cursor: pointer;">Pseudolink</span>
http://jsfiddle.net/kkepg/
You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:
span:hover{
cursor:pointer;
}
You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.
You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.
You could use a button instead of span and use bootstrap css classes to style it like a link:
<button class="btn btn-link">Link</button>
It will react on mouseOver as normal links do.
Run the code snippet to preview the result:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-link">this is my link styled with bootstrap</button>
You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:
<a href="#" onClick="myfunction();return false;">
or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.
You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:
<a href="javascript:void(myFunction())">
Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.
Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.
EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .