I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
Related
Is there any way I can change the color of the datalist (black box appearing in the image)
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
EDIT: you might be seeing it as white, it takes the default color of system
Datalist has very few to no possibilities when it comes to design. There may be vendor specific styling, but I would not advice using them in production environments.
The best workaround is to repaint the whole datalist with JavaScript like awsomplete does it. -> https://leaverou.github.io/awesomplete/
You cannot style these elements like select and datalist it has very little flexibility in styling.
Browsers define their own styles to the elements I mentioned above.
Try to read this guide
Ok, not sure if this is even possible, but I want to change the default color of a selected HTML listbox item. I'm not talking about the background color of the listbox option tag. That can be done through CSS, I get that. I'm talking about the color that overrides that background color when the item is selected. In Chrome, FF, and IE if I just change the background color to red and then select the item from the list, the color is now blue. I can't seem to find anything on whether or not overriding the color is possible, but I was hoping someone here might know. Thanks for any help.
Not reliably. The <select> element's rendering is controlled by the operating system, so it's not something that's simple to style. Most services that attempt this use JS/HTML/CSS to create pseudo- elements that can be styled at will rather than true <select>s.
Generally speaking, I wouldn't recommend styling this element for UX reasons anyway. Users need to see UI elements acting and looking in similar ways to grok their purpose and behaviour. Overriding default behaviour can erode that.
When I style select boxes I use jQuery chosen and edit the CSS
http://harvesthq.github.com/chosen/
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
I would like to add an extra border (thick) on my controls like here: http://tickspot.com/screenshots/
As we see in this link, the combos list and textbox have a blue tick border.
How can I achieve this without too much effort?
Thank you.
A CSS only solution might be to use both border and outline styles : http://jsfiddle.net/RyJzC/
(But remember outline is used to give an indication that an element has focus so make sure you take this behaviour into account if you do style outline)
Not all form elements properly support css styling. You could probably find some styles that work across the board, but it might take some work.
The easier option to get consistency is to wrap your controls in a <span class='control'></span> The downside to this method is that you have to add extra markup. You could give all the elements on your page class='addBorder' or something similar and then use JavaScript to find them and wrap them. That'd be a very unobtrusive method. Comment if you need help on implementing this and I'd be happy to help.
You may nest your elements and give the outer element the border and the padding.
here you'll get an impression: http://jsfiddle.net/jy92c/1/
i'm solving a problem to make select inputs look the same in all browsers (Chrome and Safari on Mac renders them differently) how to do that ?
The ONLY way to make them look the same right now would be to hide the original inputs, and replace them with appropriately styled html equivalents (of god forbig Flash objects), which would act as proxies, passing the functionality over to the hidden inputs.
That may be automated with JavaScript. But that would be WRONG. You are not supposed to force a different look on to OS styled elements of the webpage. It conflicts with a lot of usability and accessibility practices.
So, the only way is to make your design flexible enough to support differently looking control elements on a web page, and also use different stylesets for different browsers, to ease the adjustment of the styles (at the moment there are no inputs that would look and act the same on all browsers with the same style rules applied).
Unfortunately, life just kinda sucks on this one. Just wait till you need to style a file input...now that's some fun!
if you dont mind using js you can simply design your own look (a jpg img it can even be the same img as the original select element or if you wish you can model parts of it in css)
Then place a div on top of that image that div will contain the text which select element would usually contain
<div id="selectTxt" >
then set another div on top of that with the select element inside it.
<div id="transparentSelect" class="transparent">
<select id="selectCar" name="selectCar">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</div>
Now the trick is to set the select element opacity to zero
you can do this by adding by adding a class transparent
and then applying the class to the div
.transparent
{
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
now the element is hidden but when you click on it the list will still show up.
So the list will always look like the default list in the browser
now use js to extract the select value every time you click on the select
and set the inner html of selectTxt div to its value.
This way you get the text of the select on top of an image you want
you can make the image animated with the hover effect in css or with js
I also make a select that looks the same in all browsers but it doesnt work when you click directly on the arrow...
so its an inferior version but if you wish to look at it here it is
http://jsfiddle.net/fiddlerOnDaRoof/LM73V/
it also lacks the arrow image but you can print screen that from your browser
good luck
You should apply a CSS to reset the styles (not just for the inputs, this is a highly recommended practice for all element so that your page looks almost the same in all browsers) there are many, just google a little, for example this one, and then apply your desired styles (border color and width, background, etc...) take a look at this tutorial on how to style form elements