How to make button looks same across all devices in css?

I am working on a website in which I want search button to look same across all mobile and tablet devices. I have created the fiddle for that. The code which I have used for the search button (for mobile/tablet view) is:

@media only screen and (max-width: 767px) {
  #gv_search_button_2777 {
    padding-left: 5.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    padding-right: 5.5%;
    background-color: white;
    font-size: 12px;
    border-radius: 3.5px;
    border: 1px solid #ccc!important;
  }
}

<div class="gv-search-box gv-search-box-submit">
  <input type="hidden" name="mode" value="all">
  <input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>

Problem Statement:

If I take the above fiddle in the mobile view from the actual browser it looks good but if I see it from my phone it looks different.

Here is the screenshot for the Search button which I want to look on all mobile devices:

I am wondering what changes I need to make in the CSS codes in my fiddle so that above screenshot is present on all devices.

On my iphone when checked on safari and chrome, I am seeing this(which is not right):

You can set appearance: none to tell iOS Safari (and others) not to apply OS native styling to the element:

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

From there you can reset browser stylesheet attributes (e.g. margin, padding, font, etc) and apply your own custom styles.