Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kevin Korte
28,149 PointsiOS Safari rounded corners on input box, can't figure out how to remove.
Hello, so I'm finishing up launching a wordpress site, but I have this weird bug on Safari on an iOS device that I can't figure out.
The website in question is machinecheatsheet.com
On safari on my Macbook, the big search box over the image is fine. On my iphone that same search box has heavily rounded corners, and it doesn't work well with the intended design. So what's the deal?
I have searched and tried solutions from stack overflow which include
input {
-webkit-appearance: none;
border-radius: 0;
}
But it's not giving me any luck. Even when I disable my cache plugin, and verify by inspecting the code on my desktop browser that that bit of CSS is being rendered to browser, it doesn't make any change to the mobile safari version.
I'm sure it's something simple I'm probably forgetting, but what is it. Thanks!
3 Answers
Nick Pettit
Treehouse TeacherHi Kevin Korte,
Were you able to figure this out? If not, I would try looking into the selector specificity. An element selector (as you have in your example) can easily be overridden by a more specific ID selector.
If there's not an ID on your input already, try adding one and then using an ID selector to apply the styling, like this:
#myInput {
-webkit-appearance: none;
border-radius: 0;
}
Kevin Korte
28,149 PointsHi Nick,
No I haven't yet. Been working on other things to tidy up. I am glad to see it appears I was on the right track. I never tried an id, I guess I was over thinking my selector choice. I'll try that tonight and report back.
Seems silly to not have thought of that myself. Thank you
louiecamacho
10,980 Pointsyou can also specify the type like this
input[type="text"] {
-webkit-appearance: none;
border-radius: 0;
}
and if you are using a framework or something, you might be inheriting some css so just throw !important on there.