Question

looking on this page: http://acecontainerbuilder.com.dnnspeed.com/news-events.html you will see if using iOS device (iPad, iPhone) that the background color of the input in the bottom left corner bleeds through the border radius. Does anyone know of a way to prevent this without using images?

Answer 1

I just encountered this same problem, and the best solution I could come up with was to wrap the input element in a div tag and apply the styles to the div instead of the input element.

#sidebar div.search-wrapper {
    background-color:#fff;
    border-radius: 14px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) inset;
}

#sidebar input[type="text"] {
    background-color: transparent!important;
    box-shadow:none!important;
}

For whatever reason, mobile safari isn’t honoring the border radius on input elements even though desktop safari is. Strange.