I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
Related
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arrow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓ to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute; and margin-top and margin-left properties to set the position.
The default weight of 1px for line-through property in CSS is great for body copy at 1em.
Unfortunately for larger items such as a price set at 3em on an offer site, 1px is really too light. Is it possible to set a heavier line weight for line-through?
If not, what alternatives should I consider, such as an image overlay for example?
You can do something like this in modern browsers
.strike{
position: relative;
}
.strike::after{
content: '';
border-bottom: 4px solid red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
I <span class="strike">love</span> hate hotdogs
Made a fiddle of it too:
http://jsfiddle.net/TFSBF/
Here's another way to do it with a fake strike-through (which looks great and works on all browsers, albeit with the cost of a tiny imageload). The image is a black 1px by 2px box.
del {
background: url(/images/black-1x2.png) repeat-x 0 10px;
}
I think this is a browser implementation issue.
See this page http://jsbin.com/arucu5/2/edit
In IE8 and Firefox the line through width increases with the font size.
However in Safari and Chrome it remains at 1px
You can always a dirty Ghetto method like this
http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
This should work:
<style>
span.strike {
font-weight:bold; /*set line weight here*/
color:red;
text-decoration:line-through;
}
span.strike>span {
font-weight:normal;
color: black;
}
</style>
<span class="strike"><span>$20.00</span></span>
I've found another approach to set line weight for multiline text:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Here is an example:
http://output.jsbin.com/weqovenopi/1/
This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.
Only one disadvantage - background renders under the text.
You can thicken the line with style.
For example:
text-decoration-thickness: 3px;
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.