For the life of me I can't remove the background/box shadow on a select box in Chrome on OSx. I need it to be flat white like the other inputs. Take a look here:
http://index1.staging.homeflow.co.uk/pdrum/register.html
Some code in use that isn't doing the job:
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, white, white);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 1) 0px);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
Try:
select{
-webkit-appearance: none;
box-shadow: none !important;
}
:-webkit-autofill { color: #fff !important; }
You may also want to use:
select:focus { outline: none; }
Setting -webkit-appearance: inherit; on #pd-signin select removed it for me.
Then it seems you would need to add some arrow to indicate it is a drop-down.
Also in regards to SW4's comment:
I would not remove the outline on any focussed element as this is poor for accessibility.
Also refer to this article from Chris Coyier
Dropdown default styling - Chris Coyier
Firefox
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
From this answer
Related
Edit : added Codepen
I have a small issue with my css, there us a weird space between border-image and linear background on the top and the left of a button. Could you help me to remove it please? Thank you for your help.
Here is the codepen. The problem is on the button "text". I seems like the problem appears only on certain levels of zoom on Chrome : https://codepen.io/zamehan/pen/ZMXWeg
Here is the associated css, the button has the class .special-button :
.special-button{
background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
color:#616060;
border: 1px solid transparent;
border-image: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}
.color-button {
font-family: "Noxa";
flex: 1 100%;
margin: 6px;
font-weight: 700;
letter-spacing: 0.8px;
}
button {
color:white;
border: none;
text-align: center;
text-decoration: none;
padding: 6px 11px;
font-size: 12px;
margin: 4px 5px;
background-position: center;
cursor: pointer;
&[data-color="dark"] {
$color: #616060;
color: $color !important;
&[data-selected="true"] {
color: lighten($color, 10%) !important;
}
}
border: 1px solid transparent;
}
I ran into this problem too, and found the following article:
https://css-tricks.com/the-backgound-clip-property-and-use-cases/
I set the background-clip property of the element with the linear-gradient to "padding-box" and the line/space went away.
I have two css file.I have a class following in one css below
input[type="submit"], input[type="button"], .butLink {
padding: 3px 9px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
cursor: pointer;
color: #FFFFFF;
background: #A5BD24;
background: -moz-linear-gradient(top, #A5BD24 0%, #7DAC38 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5BD24), color-stop(100%,#7DAC38));
background: -webkit-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -o-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
background: -ms-linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5bd24', endColorstr='#7DAC38',GradientType=0 );
background: linear-gradient(top, #A5BD24 0%,#7DAC38 100%);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #781;
}
Now I want to change this style from another css file.I tried following below which isnt working -
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
Any Idea?
Writing background will override previously defined properties.
Write:
input[type="submit"], input[type="button"], .butLink{
background:#000;
}
Try using the background rule instead of background-color, and make sure that your stylesheets are in the correct order in the <head> of your HTML. If they are in the correct order, the rule should not need the !important.
You can do it easily.
Option one: If you apply this css rule for the particular page so use internal css .Add this rule within the header tag like this
<style>
input[type="submit"], input[type="button"], .butLink
{
background-color:#000 !important;
}
</style>
It will perfectly works because internal css overwrite the external css rule.
Option two: If you apply this css rule for the all pages so use external css .Add this rule after the last css property:value;like this
color: #FFFFFF;
background: #A5BD24;
background:#000;/* This will overwrite with the previous background property value #A5BD24;
Hope the answer!
I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.
It is simply an exact copy of .btn-success with modified colors and class name only:
.btn-mine {
color: #ffffff;
background-color: #ff8d53;
border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
color: #ffffff;
background-color: #ea793e;
border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
background-color: #ff8d53;
border-color: #ff6314;
}
.btn-mine .caret {
border-top-color: #fff;
}
.dropup .btn-mine .caret {
border-bottom-color: #fff;
}
Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.
I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.
But I am more interested in knowing why my approach above does not work.
I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.
What am I missing here?
.btn-success contains
.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
While your class contains just some border and background color
You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:
.btn-mine {
color: #ffffff;
background-image: none;
background-color: #ff8d53;
border-color: #ef8343;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
http://jsfiddle.net/qG2n6/1/
If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:
http://www.colorzilla.com/gradient-editor/
Which might look something like this:
.btn-mine {
color: #ffffff;
border-color: #dc5930;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #ff8d53;
background: -moz-linear-gradient(top, #ff8d53 0%, #ff732d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
background: -webkit-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -o-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -ms-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: linear-gradient(to bottom, #ff8d53 0%,#ff732d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
background-repeat: repeat-x;
}
http://jsfiddle.net/qG2n6/3/
I've figured out how to change background color of things such as the heading in the navbar along with the links but what about the rest of the bar? I'm talking about the area left and right of any links. I assume it's in the following code but I do not know what to edit as it isn't clear. Note: Changing background color has no effect. This is in the bootstrap.css. The color is currently black.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #8900ff;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
The code below in my style.css has worked to color the background color for the links:
.navbar .navbar-inner .container .nav-collapse > ul > li > a {
background-color: #E89800;
}
Solved: What I had to do was get rid of the background image like so:
.navbar .navbar-inner {
background-color: #e89800;
background-image: none;
}
It set the background image of the navbar to none and I was able to change the background-color for the rest of the bar.
Response was found: Change background color in navbar fixed menu bar Bootstrap
There is a class that ships with bootstrap that is called .navbar-inverse
You can use that class there where you have .navbar (just add on so it looks more or less like navbar navbar-inverse
This will invert the white to black and it's something you can target easily to change as well.
Here is a JS fiddle using only stock bootstrap: Demo
As a final recommendation and to help you understand things better with the CSS in bootstrap. I recommend that you don't modify any bootstrap files and you instead use your own custom.css file (place it after the bootstrap CSS so it weights more) and do your modifications there. Read the bootstrap documentation, it's very short and simple to understand.
You can find the source of this information here: http://twitter.github.io/bootstrap/components.html#navbar , just look for the "Inverted variation" part of the documentation for the navbar and you should be good to go. It's also note worthy to say that there are more things that you can invert, such as buttons with btn-inverse so read the documentation a little more so you can engage in better and simpler programming with bootstrap.
I have a navigation menu that I'm trying to recreate using only CSS3 and HTML. The design calls for a shine/glow on the currently selected menu button as per the "home" button on the attached pic. Is that effect possible using just code or will I need to use the glow image?!
Notice the shine and white line is most visible towards the center of the button and then fades towards the edges.
CSS3's radial gradients let you achieve a similar effect, although using a CSS background image may be easier for pixel-perfect adjustments. Specifically, CSS3's gradients are linear, even the radial ones.
I've constructed a small example using Firefox's radial gradients (support for Webkit will require quite different code): http://jsfiddle.net/rxMf6/
HTML:
<div class="highlighted-button">
<div class="highlight"></div>
Button
</div>
CSS:
.highlighted-button {
background: #000;
color: #fff;
font: bold 0.8em Arial, sans-serif;
padding-bottom: 0.9em;
text-align: center;
text-transform: uppercase;
width: 8em;
}
.highlight {
background: -moz-radial-gradient(center top, ellipse farthest-side,
#fff 0%, #000 100%);
height: 0.5em;
margin-bottom: 0.4em;
}
yes,that's shine is possible in css3.You adjust gradient as per your requirement.you us filter for IE.
i hope this example help's you.
.menu {
float: left;
margin: 10px 10px 10px 0;
background: #000;
width: 700px;
}
.menu ul {
margin: 15px 0 15px 5px;
}
.menu ul li {
display: inline;
list-style: none;
font-size: 12px;
font-family: arial;
color: #fff;
font-weight: normal;
}
.menu ul li:before {
display: inline;
content: "/";
}
.menu ul li:first-child:before {
content: " ";
height:45px;
}
.menu ul li a {
margin: 0 15px 0 15px;
color: #fff;
text-decoration: none;
padding:17px 30px 16px 30px;;
}
.menu ul li a:hover {
border-top:1px solid rgba(255, 255, 255, 0.4);
text-decoration: underline;
color: #fff;
padding:17px 30px 16px 30px;
background: -moz-radial-gradient(center -5px 45deg, ellipse farthest-corner, rgb(255, 255, 255)0%, rgba(0, 0, 0, 0.2)70%) repeat #000;
background: -webkit-gradient(radial, 50% 0, 0, 50% 0,50, from(rgba(255, 255, 255, 0.9)), to(#000));
}
<nav>
<div class="menu">
<ul>
<li>HOME</li>
<li>WHAT IS THIS?</li>
<li>SWEAR DICTIONARY</li>
</ul>
</div>
</nav>
Here is a similar CSS3 gradient. You can change the colors and get your desired look. I don't know if it is exactly like what you wanted though. It doesn't do a rounded look just a straight gradient.
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.32, rgb(14,15,14)),
color-stop(0.7, rgb(0,0,0)),
color-stop(0.85, rgb(201,201,201))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(14,15,14) 32%,
rgb(0,0,0) 70%,
rgb(201,201,201) 85%
);
You will need an image. There is really no way to achieve this effect with just code. Though most browsers can be handled with the use of CSS3 box-shadow or gradients, Internet Explorer 8, and partially IE 9 will have issues. To give proper cross-browsers support, you will have to use images to achieve the desired effect.
The reason I say you will need an image is very well may have to include additional markup and hacky workarounds to achieve the effect. This is not desirable and could cause conflicts in trying to implement the CSS3 version as well.