I have assigned a background image to the select in html. The image is simply an arrow.
My code is:
select {
font-style: normal;
-webkit-appearance: none;
-moz-appearance: none;
-appearance: none;
background: url("/icons/dropdown_arrow.png") 135px center;
background-repeat: no-repeat;
border: 1px solid #cacaca;
padding: 10px;
width: 156px;
border-radius: 4px; }
The arrow is appearing very near to the end of the drop down.
Is there a way to move the array to left by say 20px so that drop down looks better.
I tried adding padding-left:150px but it hides the selected option in the select when drop down is in closed state.
Decrease the left position of your background image:
select {
font-style: normal;
-webkit-appearance: none;
-moz-appearance: none;
-appearance: none;
background: url("/icons/dropdown_arrow.png") 115px center;
/*----------------------------------------here-^^^-----------*/
background-repeat: no-repeat;
border: 1px solid #cacaca;
padding: 10px;
width: 156px;
border-radius: 4px;
}
For those facing this problem, the solution lies in the property background-position of the select element. I adjusted it and was able to move the arrow to desire position
Related
I dont know why this is not working. I have already had a look and can't find any solution.
See it LIVE HERE.
The two input boxes in the banner have background images attached but they are not showing.
Change background: transparent; to background-color: transparent;.
Explaination:
.jobs-inp {
background-image: url(images/magnify-icon.png);
background-repeat: no-repeat;
background-position: 0 0;
padding-left: 15px;
background: transparent;
font-size: 18px;
font-family: Interstate-Regular;
color: white;
border: 1px solid white;
height: 40px;
width: 25%;
}
background: transparent; overrides all background properties before, because background is a shorthand for all properties.
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I need to style the select boxes in my web site something like below,
I have suceded with html+css for fix sizes as below,
<div><select></select></div>
div{
background: url("select-box-background.png") no-repeat scroll right center #fff;
height: 23px;
overflow: hidden;
width: 54px;
}
select{
background: transparent;
border: 0 none;
border-radius: 0;
font-size: 12px;
line-height: 1;
padding: 3px;
width: 78px;
color: #78abd0;
}
But I can't manage to apply this for all select boxes with different width, because I have done the styles with fix width.
How to manage same thing with the dynamic width.
I just created a button with a dropdown menu, you can view the demo here.
In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.
The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.
I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.
Here is the code I have:
HTML:
<div class="shopping-cart-wrapper">
<a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
<div class="shopping-cart-dropdown">
<div class="empty-cart"><span>Your shopping cart is empty</span></div>
</div>
</div>
CSS:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
.shopping-cart-wrapper {
display: inline-block;
background: #000;
margin-top: 5px;
margin-left: 15px;
}
.shopping-cart {
border: 1px solid #d3d3d3;
color: #656565;
padding-right: 10px;
padding-top: 8px; padding-bottom: 8px;
padding-left: 40px;
font-weight: bold;
display: inline-block;
font-size: 13px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
position: relative;
}
.shopping-cart:hover {
background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ;
color: #202020;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.shopping-cart-dropdown {
opacity: 0;
display: none;
border: 1px solid #d3d3d3;
padding-bottom: 80px;
position: relative;
right: 49px;
width: 247px;
background: #f6f6f6;
font-size: 12px;
font-weight: bold;
}
.empty-cart{
background: #202020;
padding: 10px;
color: #fff;
text-align: center;
position: relative;
}
What's Going On
The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.
Current Selector:
To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.
We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.
Code
Working Example
Current:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
Working:
.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
opacity: 1;
display: block;
}
Further Information
http://reference.sitepoint.com/css/adjacentsiblingselector
Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:
.button {
cursor: pointer;
display: inline-block;
color: #FFF;
font-weight: normal;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: inline-block;
background: #32a2f0;
border: 0px;
border-bottom: 2px solid #1e87cc;
padding: 10px 30px;
}
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD;
}
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
margin-top: 2px;
padding-top: 10px;
padding-bottom: 8px;
}
http://jsfiddle.net/6SeG8/
The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.
It's because of the borders and the top margin you're applying. Rather than specifying border-top: 0px;, etc., you should instead give a transparent border. You can then give extra width to the top border to make up for the margin:
.button {
...
border-top: 2px solid transparent;
}
.button:active {
...
border-bottom: 2px solid transparent;
border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}
JSFiddle demo.
Also you really shouldn't need to use !important at all.
Consider using an after pseudo-element:
.button:active:after{
content: " ";
position: absolute;
top: -4px;
left: 0;
width: 100%;
height: 100%;
}
JSFiddle
Note, that it doesn't work in IE7 and earlier.
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
//margin-top:2px; //this is the problem
padding-top: 10px;
padding-bottom: 8px;
}
Updated Fiddle
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}
Try to press and hold button.
You can see if you press in a middle of the button then the button is dark blue (really pressed).
If you press near the border then the button cannot get 'mouseup' to raise 'click' event. So your javascript will never receive click event and triggered.
If you want the same behavior change border margin to transparent border with desired size.
One thing you can do is
<span class="button">Click me</span>