0

So, I have a SELECT element that is on a Form as well as some other INPUT textboxes.

I have the same style set to all of them. The textboxes look nice, they are the size I want with the right spacing and the font is nice.

The select (dropdown box) looks like the classic crappy out of the box browser drop down list. It's not listening to the fact that I have the following in my style sheet (same as for inputs)

select {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px; }


input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px; }

When I load the page, the SELECT element looks like crap. When I inspect it in Chrome it shows no matched CSS styles. If, in Chrome, I manually paste in these styles for this element in developer tools, all the sudden the SELECT element looks like I have intended. Why isn't it picked up by the browser when page loads?

Happens in Chrome, and IE. Haven't tested other browsers.

user1060500
  • 1,475
  • 1
  • 20
  • 38
  • 1
    It is working right in IE, I do this fiddle: http://jsfiddle.net/RrEM8/ – Aguardientico Jul 05 '13 at 01:30
  • Possible duplicate: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – Dom Jul 05 '13 at 01:30
  • Also works for me on firefox. Perhaps you have another rule in your css file over-riding these. – fbynite Jul 05 '13 at 01:35
  • works in chrome too. please send link to test page. – sinisake Jul 05 '13 at 01:37
  • I will check now. It's the default ASP.NET MVC 4 template I am using out of the box. I don't know what it could possibly be right now, as it's pretty bare bones.... – user1060500 Jul 05 '13 at 02:12
  • The problem is that it won't work when the select styling is in my referenced site.css stylesheet. It will work when I apply the style to the select element in a style tag on the same page. Weird. Can you reproduce this? If not, any thoughts on why mine is behaving like this? – user1060500 Jul 05 '13 at 02:39
  • I can think of 2 things to do: Try pressing F5, and if it doesn't work, Ctrl + F5 to refresh the stylesheet (browser's cache problem). If it still doesn't work, open the stylesheet and check that it's indeed there (server's problem). – Francisco Presencia Jul 05 '13 at 03:12
  • I did all those things already. It didn't help. :( – user1060500 Jul 05 '13 at 03:14
  • Make sure there are no syntax errors in your CSS file – omma2289 Jul 05 '13 at 05:41

0 Answers0