CODEWITHSUNDEEP
htmlcss
user8473431
user8473431

Reputation: 119

Input search form shows rounded border on mobile but not on desktop

I have a search form that I coded to only include a border-bottom styling. On desktop it appears as I want it to (second photo), but on mobile it's showing a rounded border (first photo). I'm using Chrome on both desktop and iOS mobile...

enter image description here enter image description here

.search-bar {
  height: 60px;
  padding:1em;
  outline: none;
}

#search {
  font-size: 2em;
  font-family: Linux Libertine;
  position: relative;
  top: 50%;
  left: 50%;
  padding: 30px;
  max-width: 600px;
  height: 60px;
  width: 100%;
  transform: translate(-50%, -50%);
  display: inline-block;
  border: 0;
  border-bottom: 5px solid black;
  background-color: #fff;
  color: #000;
  outline: none;
  border-radius: 0;
  box-shadow: 0;
}

input::placeholder {
  font-size: 1em;
  font-family: Linux Libertine, times;
  color: #D8D8D8;
}
<div class="search-bar">
   <input type="search" id="search" placeholder="Enter a keyword" class="keyword" />
</div>

Upvotes: 1

Views: 1440

Answers (1)

NoobishPro
NoobishPro

Reputation: 2549

but what mobile are you using? Iphone or android? You see, chrome on iphone actually uses safari to render stuff (in a sense). Apple has round buttons, where as we generally have squared ones. Just use border-radius:0; to fix. You may also be looking for -webkit-appearance: none; for iphones. I believe that is also a part of the apple experience.

So:

#search {
  font-size: 2em;
  font-family: Linux Libertine;
  position: relative;
  top: 50%;
  left: 50%;
  padding: 30px;
  max-width: 600px;
  height: 60px;
  width: 100%;
  transform: translate(-50%, -50%);
  display: inline-block;
  border: 0;
  border-bottom: 5px solid black;
  background-color: #fff;
  color: #000;
  outline: none;
  border-radius: 0;
  box-shadow: 0;
  -webkit-appearance: none;
}

Upvotes: 2

Related Questions