Is it possible to have a style for the html select box when it's just sitting there, and then a different color when the user has clicked on it and the items are listed?
I want something like this:
select {
background:#fff;
color:#929496;
font-size:14px;
}
Then the colors are inverted, so the text is white and the background is grey?
Use the :focus pseudo-class:
select:focus {
color: #fff;
background-color: #929496;
}
This also applies the inverted colors to its options when they appear.
jsFiddle preview
SELECT boxes are OS-level controls, not HTML controls. You cannot reliably style them across browsers. You can replace them with various HTML+CSS-based techniques.
<style>
::-moz-selection {
color:white;
background:#3A75AF ;
}
::selection {
color:white;
background:#3A75AF ;
}
</style>
Will do your job :) Works everywhere. Please dont ask about IE.
Related
I hate it when I'm browsing and end up selecting text or elements on a webpage by accident; everything turns blue! So for the moment, I'm using this class on the parts of the page where the user could mistakenly select things:
.NoSelect{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;}
This works fine but the problem is that I end up with lots of divs that have this class.
Is there a way to change the color of selected text and selected elements and make it transparent?
Thanks.
You can use the ::selection CSS attribute.
for everything:
::selection { background: transparent; }
or just p tags, for example:
p::selection { background: transparent; }
Here's an example.
There is border around button and link when click.
How can I remove it?
You can preset it like that :
:focus{
outline:0; /*removes the dotted border*/
}
But remember (for accessibility reasons) to set the style "later" in your CSS file to something more visible. For example :
a:focus, a:active{
color:#ff5500; /*different color than regular*/
}
input[type=submit]:focus, input[type=submit]:active{
background-color:#444; /*different color than regular*/
}
Try this one
a:hover, a:active, a:focus {
outline: 0;
}
It's ugly, but so are most IE fixes.
a:focus, *:focus {
noFocusLine: expression(this.onFocus=this.blur());
}
To start with, I can see one of your tags is IE7-bug, while this is actually more like a feature. The purpose of having this dotted outline is for users to be able to navigate between various controls using their mousewheel or the tab key.
In any case, to define the style of an element when it's "focused" use the CSS :focus selector. The property that styles this outline is, trivially, outline; outline: 0 will prevent the focus outline from appearing.
Note: You might want to apply that rule only on your button, and not on all elements, because some users might be used to seeing something to indicate focus, which makes it easier to navigate using the methods mentioned above.
Hope that helped in any manner.
CSS outline is not supported in IE7. That "browser" requires the following CSS expression:
a {
_noFocusLine: expression(this.hideFocus=true);
}
It works also in newer versions.
This would do the trick
a {
outline:0;
}
This will also work
a
{
outline-style:none;
}
a:link{
outline-style: none;
}`
Try setting the outline property:
a {
outline: 0;
}
Try
a {
outline: none;
}
Always try to use css reset.This will help you to solve the problem like this.I use eric mayer css reset tool.
Apply this rule to the input
input { outline : none ; }
This is all around code to remove outerline and put in your your CSS under the desired class name (className in IE). Example for <a> tags
a{
_noFocusLine:expression(this.hideFocus=true);
outline-style:none;
outline:0;
}
Example for all tags in your html page!
*{
_noFocusLine:expression(this.hideFocus=true);
outline-style:none;
outline:0;
}
Example for a tag with class myClassName in your html page!
.myClassName{
_noFocusLine:expression(this.hideFocus=true);
outline-style:none;
outline:0;
}
Example for a tag with id myidName in your html page!
#myidName{
_noFocusLine:expression(this.hideFocus=true);
outline-style:none;
outline:0;
}
Works in major browsers and if not they are so old so the chance of how many people there still are using this old browsers!
Notes: outline:none 0; does also work in newer browsers but not in all. But outline:0; is universal and in those browsers there don´t understand 'none' and you get there's default value, but 0 understand in all browsers there are using outline:.
And you need this for IE7: _noFocusLine:expression(this.hideFocus=true);
or use JavaScript for the rest!
window.document.getElementById("myidName").blur();
window.document.getElementById("myidName").hideFocus=true;
window.document.getElementById("myidName").style.outline=0;
or
Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;
or with check if element exist:
if (window.document.getElementById("myidName")){
Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;
}
JavaScript can do the trick for IE6 and IE7 and other CSS can't.
You can do it with this code:
a:focus{
border: none;
}
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I am using a bit of HTML in my IPhone application. I don't have much idea about HTML.
When we touch any hyperlink(ahref in HTML) there is a blue selection color that appears in "li" which contains ahref. How can we disable it?
You can override the behaviour by specifying your custom color for links via css:
a { color:green; }
Or based on their status eg active, clicked, etc:
a:active { color:green; }
a:visited { color:red; }
a:hover { color:orange; }
I'm not 100% sure, but if the text is truly being selected, and you're seeing a blue color, then the fix would be to apply a style like this:
li::selection {
background-color: transparent;
}
li::-webkit-selection {
background-color: transparent;
}
li::-moz-selection {
background-color: transparent;
}
That's only if it truly is a selection that's occuring. Mind you, only the ::selection and maybe the :-webkit-selection could possibly apply to an iPhone. ::-moz-selection would be for a Firefox browser.
I am tring to style a input submit button like an anchor.
But it is putting a second line underneath the anchor.
How do I style just one line?
.usernameAnchor
{
background-color:white;
color: #034af3;
text-decoration: underline;
border: 0px none;
display:inline;
height:25px;
}
Malcolm
EDIT: This problem is in IE8.
That seems to be working fine as I created and checked that here:
http://jsbin.com/adake3/2
Looks like there is something there with your html markup.
Update:
After seeing your code, you are trying to set the text-decoration to underline, but mind you this is a button not a link. One alternative is to give border-bottom to it to mimic underlining something like this:
.usernameAnchor:hover
{
border-bottom:1px solid #0000ff;
}