Dizzy Dizzy - 27 days ago 5
CSS Question

CSS style rendering different from local host to online in Chrome

I'm having an issue with my css and can't understand what is going wrong.

On my development design on my PC the test page CSS is correct, but once I upload to the server the CSS changes.

Basically what I have is a form that where the Input box is invalid it shows a Red shadow if valid it shows Green, but this is not displaying on the form on the web only localhost.

input:focus:invalid {outline: none;}
input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; border: 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 14px; margin: 1px 0 12px 0; padding: 6px; height: 30px; width: 100%; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; }
input[type="text"].oversize,input[type="password"].oversize,input[type="date"].oversize,input[type="datetime"].oversize,input[type="email"].oversize,input[type="number"].oversize,input[type="search"].oversize,input[type="tel"].oversize,input[type="time"].oversize,input[type="url"].oversize,textarea.oversize { font-size: 17px; padding: 4px 6px; }
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,textarea:focus { background: #fafafa; outline: none !important; border-color: #b3b3b3; }
input[type="text"][disabled],input[type="password"][disabled],input[type="date"][disabled],input[type="datetime"][disabled],input[type="email"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="time"][disabled],input[type="url"][disabled],textarea[disabled] { background-color: #ddd }
input[type="text"]:invalid,input[type="password"]:invalid,input[type="date"]:invalid,input[type="datetime"]:invalid,input[type="email"]:invalid,input[type="number"]:invalid,input[type="search"]:invalid,input[type="tel"]:invalid,input[type="time"]:invalid,input[type="url"]:invalid,textarea:invalid { box-shadow: 0 0 1px 1px red; }
input[type="text"]:valid,input[type="password"]:valid,input[type="date"]:valid,input[type="datetime"]:valid,input[type="email"]:valid,input[type="number"]:valid,input[type="search"]:valid,input[type="tel"]:valid,input[type="time"]:valid,input[type="url"]:valid,textarea:valid { box-shadow: 0 0 1px 1px green; }
textarea { height: auto }
select { width: 100% }

Answer

if your css works on local then it should work on server also,

I think ur viewing old version of your css

remove your browser history and clear cached
press Ctrl + F5 to force reload the page

make sure you link ur css file properly check using inspect element

if it does check ur css file from inspect element whether ur updates are there are not

Comments