[Support request] Search input field rounded on iPhone

[Kathryn]

For some reason, search input field on my website is not applying the styling that has been set for all screen sizes. It adds border radius to all corners, instead of just top left and bottom left corner. It also adds inset box shadow at the top of input field, although it is not specified anywhere.

A whole of css code for search input:

.menu-bar-items .search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

input[type="search"] {
  max-width: 130px;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 20px 0 0 20px;
}

.search-submit {
  padding: 2px 6px;
  border-radius: 0 20px 20px 0;
  font-size: 15px;
}

.search-submit .gp-icon svg {
    stroke: #fff;
stroke-width: 10;
}

@media screen and (min-width: 981px) and (max-width: 1196px) {
	.menu-bar-items .search-form {
    margin-top: 8px;
    }
}

Screenshot of the problem
https://pasteboard.co/JYwVpTL.png

[Kathryn]

Helloo!?! Are you providing any support or not? 7 hours

[Kathryn]

Why am I discriminated always waiting multiple hours while questions after mine are getting answered massively?

[Elvin]

Hi there,

Why am I discriminated always waiting multiple hours while questions after mine are getting answered massively?

My apologies. it’s definitely not intended.

For some reason, search input field on my website is not applying the styling that has been set for all screen sizes. It adds border radius to all corners, instead of just top left and bottom left corner. It also adds inset box shadow at the top of input field, although it is not specified anywhere.

Can you try replacing this:

input[type="search"] {
  max-width: 130px;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 20px 0 0 20px;
}

with this?

input.search-field {
  max-width: 130px;
  font-size: 15px;
  padding: 2px 6px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

Let us know how it goes.

[Kathryn]

The issue still remains.

[Ying]

Hi there,

I think this issue is an iOS issue, we can’t really do anything about it, you can have a look at this topic, it might help 🙂
https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

[Author]

Posts