I tried to do the following to remove the focus on the select of bootstrap (i don't want to remove it actually, just to change it's color)
select:focus{
color:#333333;
//border:10px solid red;
border:none!important;
outline:none!important;
}
still see a shadow around it...anyone have a clue?
Pretty sure (without a picture) that you'll need box-shadow: none!important; as well
demo - http://www.bootply.com/L0Sju3iguY
set outline:0 and box-shadow:none
select:focus{
outline:0;
box-shadow:none;
}
Your style could be overwritten by another style with !important. Without code sample it's a bit tricky to help you... Generally you should avoid using !important(if you are using it only to try to make this work it's OK). Are you using any classes on your input or something?
Related
I'm having a little trouble, I cant seem to find/use the right pseudo class and was hoping some one here might be able to tell me which would be the correct one.
My issue is that google chrome has your previous values which you have inputted into the text input, which is great and all but I can't seem to get my styling right if you click one of the suggestions. My styling works fine in all other aspects of the text input but when you select an option from chrome's list of previous values the background of my text input goes blue, which I don't want. I have tried :active, :visited, and a few others, but I think i'm using the incorrect classes.
Please can some one help me out, I just can't seem to find the right thing.
Thanks.
For webkit browsers you can use -webkit-autofill:
input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus, {
color: blue;
background: red;
}
Check this article out for more info.
Add this to your css, and add the desired styles to it.
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
}
Check out this article, to learn more.
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.
DEMO http://jsfiddle.net/XxkSC/3830/
There is better option to achieve a natural design:
height:30px;
background:#ffffff;
DEMO JSFiddle
p.s
Vector's answer is hiding the arrows on the right side.
Add the following property to your select in your css file:
-webkit-appearance:none;
If you are using bootstrap, you can add class custom-select:
<select class="form-control custom-select">
After adding it, you can eventually adjust height by adding line-height property to css:
select {
line-height: 1.3;
}
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
This solution is not only for select but also for input and textarea.
select,
textarea,
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
I also applied the solution for all browsers, so it should work the same way everywhere.
!important did the trick for me, but it will depend if you will need it or not.
I can't seem to change the background color of my navbar in IE9. The site uses Twitter-Bootstrap
Here is the website: http://iioengine.com/
The top navbar has a white background in every browser other than IE. It's black in IE. I've tried targeting every part of the element with CSS but nothing has effected its color in IE.
I've also set background-image to none in all relevant classes
Anyone know what the issue is or what I need to target? IE is driving me crazy.. Thanks
SOLUTION:
.navbar-inverse .navbar-inner{
filter:none;
background-color:white;
}
This is being caused by a MS filter gradient on .navbar-inverse .navbar-inner {}
The solution is to override this with none in your own stylesheet:
div.navbar-inverse .navbar-inner {
filter: none;
background-color: none;
}
I ran into a simlar issue w/IE9 + Bootstrap 3. filter:none did not fix the issue for me. Adding this did:
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
Filter is the problem as pointed out by #Adrift
Some other CSS files removed the border around all GWT CaptionPanels. Now I'm looking for a way to add the CaptionPanels border again through the GWT projects .css file. Do you have an idea how to do it? Simply adding a .gwt-CaptionPanel{} to the css file has no effect...
I'm answering my own question here.
It took me some time to figure out that GWTs CaptionPanel uses a fieldset under the hood. The following places a red 1 pixel solid border around GWT CaptionPaneles:
fieldset {
border: 1px;
border-style: solid;
border-color: #ff0000;
}
Im not experienced with GWT CaptionPanels but you can try to set an !important on the class that makes the borders in the main style sheet. So you get something like: .borders {border-width:1px !important}
I am desperately trying to find a way to get this working. I have a menu that use images for links. But in IE and FF there is an annoying border around the image that I don't know how to get rid of.
Would you be able to quickly tell me the CSS attribute to avoid this effect.
Thanks in advance for your time.
Antonio
ul li img { border: 0 }
I believe you are talking about the implicit outline or border that are added to img elements within a tags.
The fix is simple:
a img
{
border: 0 none;
outline: 0 none;
}
The outline may no longer be necessary, I'm not sure if any browsers use outline for the effect any more.
Edit to add:
For some reason in FF/IE, the specificity of img or a is too low to override the default behavior.