I am having an issue with my dropdown menu in Internet Explorer 11.
There are blue lines at the top and bottom. I believe they correspond to the background color.
This is what it looks like
Here is the css that corresponds to it..
dropdown-menu {
color: #fff;
text-decoration: none;
background-color: #337ab7;
}
I am guessing it has to do with the height being off in the box, but I am unsure how I would correct that. Any help would be appreciated.
Edit: Looking through the css on the page my original thought of the code that was generating the dropdown menu was wrong. It's actually this.
.selection-cell {
width: 30.2969px;
height: 30px;
background: url('images/buttons/control.png') no-repeat;
background-color: #3498db!important;
background-position: 8px 8px;
border-radius: 3px;
overflow: hidden;
background-size: 13px 13px;
margin-bottom: inherit;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid transparent;
cursor: pointer;
}
.selection-cell:hover{
background: url('images/buttons/control-selected.png') no-repeat;
background-position: 8px 8px;
background-size: 13px 13px;
border-color: #adadad;
}
.selection-cell option{
background: white;
/*border-left: 1px solid black;*/
-moz-clear: both;
-ms-clear: both;
clear: both;
-moz-box-shadow: none !important;
}
Related
How can I get the box inside the buttons?
I use dojo toolkit and the button css is as follows:
.button0 {
margin: 2px;
padding: 0px;
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-decoration: none;
outline: none;
outline-color: transparent;
}
.button0:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color: #ffab23;
outline: none;
outline-color: transparent;
}
.button0:active {
position: relative;
outline: none;
outline-color: transparent;
}
What I want to remove is the 1px border that has the text.
can't be sure without seeing the html. I'm assuming the css class is on the button element like so
<button class="button0">
and that there are no nested element tags.
add:
.button0:focus{ outline: 0 }
may fix it.
note: for accessibility, its best not to remove the outline.
So I have button defined by the a-tag which says:
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
}
.button:hover {
background: #a1a1a1
}
.button:active {
box-shadow: 0px 0px 0px #999999;
}
Click me
So pretty straight forward. A button, a hover effect, and an active effect. However, what I would actually like is the effect of pushing the button. Now the box-shadow just disappears, but the button itself doesn't go "down" so to speak...
It's pretty easy with just a button, but I need this for a -button. Can it be done ? :)
You can add position: relative to the button and add top: -1px on :active for 1px top offset.
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
position: relative;
}
.button:hover {
background: #a1a1a1
}
.button:active {
top: -1px;
}
Click me
You can use the transform scale property. This will make an illusion that the button is clicked since it becomes smaller on active.
.button {
transition: all 1s;
}
.button:active {
transform:scale(0.8,0.8);
}
https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale
You can do that manually like that :
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3
Or you could also use the material design through the materialize package:
https://www.w3schools.com/w3css/w3css_material.asp
And this is an example for buttons :
<a class="waves-effect waves-light btn">button</a>
http://materializecss.com/buttons.html
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
Select box shows some unreal background image in chrome only.
I used following css.
Please help me.
Thanks in advance.
select
{
font-size: 11px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 0 0 0 5px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../Images/select-ico.png") no-repeat scroll 96% center #fff;
}
When I hover over the whole button, I would like it to appear over the whole button. Because the button has a background image, i am not able to do it correctly. The buttons looks like these:
The CSS appears like this:
#tablist{
padding: 0px auto 0px auto;
height: 32px;
}
#tablist li{
display: block;
width: 150px;
height: 35px;
float: left;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin: 0px auto 0px auto;
text-align: center;
padding-top: 5px;
cursor: hand;
cursor: pointer;
}
#tablist ul:hover{
background-color: red;
}
.tablink{
text-decoration:none;
}
.locked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:5px -85px;
}
.unlocked{
background: url('../img/DashboardButtonsLocked.png') no-repeat;
background-position:4px -2px;
}
How do i correct it? Need some guidance over it.
Try overriding the background property at hover:
#tablist ul:hover{
background: red;
}
Here is a demo : http://jsfiddle.net/taQfU/
Hey i think you should give to #tablist li:hover
As like this
#tablist li:hover{
background-color: red;
}