Remove Input Shadows on iPad style css

Remove Input Shadows on iPad

I was recently tasked with testing an existing web application on the iPad. I was fairly certain the app would work without issues, but my larger concern was styling.

Remove Input Shadows on iPad style css
Remove Input Shadows on iPad style css

One undesirable style I found was that all text INPUT elements had a hideous top shadow effect. After a bit of research, I discovered that the -webkit-appearance property was the key:


input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}

Adding this bit of CSS removed those disgusting shadows and now my input elements look exactly as I’d like them to look! Of course, my inputs have other stylings (wrapped in a DIV with a border) to make their presence apparent.

 

Using the placeHolder attribute would also be helpful in making INPUT elements more visible.

Remove Input Shadows on iPad style css
Remove Input Shadows on iPad style css

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *