I've been trying to skin a select box with css to make a custom form. I've been able to successfully do with firefox but chrome and safari have some extra parts to it not allowing me to do it.
1
-
4-1 What do you have so far? And what exactly do you wish as end result? Which parts exactly aren't allowed by Chrome/Safari, and how do they show them? Show us your style sheet! And especially for this kind of questions, some screen shots are more then welcome. Please improve your question.NGLN– NGLN2011-08-16 17:27:47 +00:00Commented Aug 16, 2011 at 17:27
Add a comment
|
3 Answers
Set an appearence: none and you can do almost anything with it: https://jsfiddle.net/CUA9p/1475/
body {
background-color: #fef;
margin: 2em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #103;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
border: 1px solid white;
border-radius: 2px;
box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
color: white;
font-family: sans-serif;
font-style: italic;
margin: 2px;
outline: none;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
text-transform: lowercase;
width: 100px;
}<select>
<option>Hello</option>
<option>World</option>
</select>Also take a look at this: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
1 Comment
Jonny Haynes
You sir are a genius. #hattip
Here's a great site that will keep all your form elements looking consistent. http://formalize.me/
1 Comment
Yes Barry
I'm surprised no one voted this up, I thought this was great!
i dnt think it is possible with css alone..cause select box is a control that is browser specific.. you will have to use javascript or jquery.
