how can I make rounded text input fields with css ?
thanks
With CSS3:
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
in modern css3 browsers
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
in older you'll need to use a JS like jquery with rounded corners plugin or Ruzee
Both answers are correct you can either use CSS3 styles (which aren't really supported with the current IEs) or you can use a javascript package such as http://www.malsup.com/jquery/corner/.
There is however another option, which shouldn't be discarded even though it's not exactly ideal. If your inputs are of fixed length you can also draw whatever background (including borders) you want for your inputs into an image and use
background: transparent url(pathToYourImage.png);
border: none;
This has the benefit of working on pretty much all browsers you can think of.
Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp
Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...
^ that last one will work on all browsers.
However some browsers add an outline! Chrome, safari etc.
I know you can turn off the outline in chrome using outline:0, but there is no way that I found where you can turn off the outline in Safari. It will look hideous in it!
Use border-radius use pixels according to your layout.
Related
I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.
Take for example the following in IE8;
background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
Thanks :).
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like
.class_name {
background: #000;
background: rgba(0,0,0,.5);
}
So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.
Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.
For example
background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:
select {
-moz-padding-top: 10px;
-webkit-padding-top: 0px;
}
Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle
http://jsfiddle.net/uHDa6/
Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".
The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write
#-moz-document url-prefix() {
select {padding-top:10px;}
}
which is simply the Mozilla-prefixed version of the #document rule, that is not recognised by other browsers.
However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.
style="font-size: 14px; padding: 11px 0 11px 5px;"
That has the desired effect in all browsers. See new fiddle.
I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).
Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).
To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.
Is it possible?
You could use CSS pseudo-content to achieve a fake border, like this:
.red-mark:before {
content: '';
display:block;
width: 15px;
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
background: red;
}
See: http://jsfiddle.net/MnPka/1/
The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing
The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.
border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.
Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.
You can read more about it here at the MDN.
The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.
When using vendor prefixes, it’s important to keep in mind the order in which you list rules in your declarations.
I already know how vendor prefixes work and why there are needed, but why is good list the vendor-prefixed property first, and the non-prefixed CSS3 property last? I also checked many important sites and they are using this approach:
.foo {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; //why this is the last one?
}
That's it, why put the actual CSS3 property last? There is a special reason?
With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.
In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.
Useful resource is http://taligarsiel.com/Projects/howbrowserswork1.htm and http://www.w3.org/TR/CSS2/grammar.html, maybe you`ll find your answer there.
Here is a good reason: [summary of this post which Andy mentioned]
During the period where browsers support both the vendor prefixes and the actual property - there might be differences in the implementation of the css rule.
Example:
.not-a-square {
/* These do totally different things */
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
The spec or "real" version will render the top left and bottom right
corners at 30px and the top right and bottom left corners at 10px. The
vendor prefix will render all four corners with elliptical corners
30px wide and 10px tall.
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)