Select box styling not taking place

Question

I created a select/option box and my styling is not taking place. I have uploaded the same files multiple times, so it is not that. I created a fiddle to see if it would work and it does. However, when I add more of my css code it goes back to an un-styled version. I do not see what I am doing wrong with the code over-top of this for it to break. Does anyone see something I am overlooking?

https://jsfiddle.net/ybd0bLr1/1/

.selectbar is the class in which my select bar styling comes from.

.inputbarphone[type=tel] {
    display: block;
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    outline: none;
    border: 1px solid #DDDDDD;
}
.inputbarphone:hover {
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}
.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    -moz-box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
    -webkit-box-shadow: 0 0 1px 1px rgba((51,133,255, 1);
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}
.selectbar {
    display: block;
    width: 400px;
    margin: 10px auto;
    font-size: 18px;
    padding: 10px;
    -webkit-transition: all 0.40s ease-in-out;
    -moz-transition: all 0.40s ease-in-out;
    -ms-transition: all 0.40s ease-in-out;
    -o-transition: all 0.40s ease-in-out;
    outline: none;
    border: 1px solid #DDDDDD;
}

Some good reading on the subject of mucking with select box styling https://css-tricks.com/dropdown-default-styling/ — robabby, Oct 23 '15 at 19:42

AtheistP3ace · Accepted Answer · 2015-10-23T19:45:25.183

5

You have an extra parentheses on this line:

.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    -moz-box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
    -webkit-box-shadow: 0 0 1px 1px rgba((51,133,255, 1); <-----
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}

Fiddle: https://jsfiddle.net/ybd0bLr1/2/

As @Quentin said, just do this:

.inputbarphone[type=tel]:focus {
    border: 1px solid #3385FF;
    box-shadow: 0 0 1px 1px rgba(51,133,255, 1);
}

edited Oct 23 '15 at 19:45

answered Oct 23 '15 at 19:41

AtheistP3ace

9,611
12
43
43

4

Using vendor prefixed box-shadow today is [pointless](http://caniuse.com/#search=box-shadow) and if this error had been made on a standard property, it would have been picked up by a [validator](http://jigsaw.w3.org/css-validator/). – Quentin Oct 23 '15 at 19:42
Wow, can't believe I didn't see that. Why is the placeholder not showing though? – Becky Oct 23 '15 at 19:43
1

@Becky regarding placeholders for select menus... http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box – robabby Oct 23 '15 at 19:43
1

@Quentin agreed can't remember last time I used vendor prefix on box-shadow. – AtheistP3ace Oct 23 '15 at 19:44
@Quentin How else would I add the box shadow then? – Becky Oct 23 '15 at 19:44
2

@Becky just drop vendor prefix and use `box-shadow`. And don't forget to Lint your code! – robabby Oct 23 '15 at 19:45
1

@Becky what placeholder? Edit: Never mind I am blind. I would take robabby suggestion with the link. – AtheistP3ace Oct 23 '15 at 19:46
I figured out the placeholder, except my font doesn't match. Would I just give that option a different class to match the normal shade of gray for placeholder font? – Becky Oct 23 '15 at 19:49
1

Can't say I have ever used a placeholder for select before. Update fiddle and I will take a look at font issue. – AtheistP3ace Oct 23 '15 at 19:50
@AtheistP3ace I tried your box shadow method, but changed the color to #ccc, but it doesn't look the same as my other box shadows. It just likes like a bit of gray all around it. Can't I just delete my webkits and have the same thing? – Becky Oct 23 '15 at 19:50
1

@Becky I am not sure what you mean. Its not my method. Its just the style property name. It doesn't require vendor prefixes anymore. Every browser supports it. – AtheistP3ace Oct 23 '15 at 19:53
@AtheistP3ace I mean can't I just do this... `/*-moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc;*/ box-shadow: 0 0 10px #ccc;` The areas commented out, I mean just remove those parts. – Becky Oct 23 '15 at 19:55
1

@Becky Yea. But you originally had 0 0 1px 1px. Maybe thats why you don't like the look anymore? – AtheistP3ace Oct 23 '15 at 19:56
1

@Becky Linting is a practice of validating your code. A linter would have caught your extra parentheses and thrown an error, showing you which line it failed on. The link AtheistP3ace is a great place to start. if you are using Atom or Sublime Text, they have some great linting plugins that will do it for you in the editor. https://atom.io/packages/linter-csslint – robabby Oct 23 '15 at 20:01
Great! that will definitely come in handy! Thanks!! – Becky Oct 23 '15 at 20:03

Select box styling not taking place

1 Answers1