Button CSS on tablet is not as shown on PC and in Responsive Design Mode

Navigation
0

I did everything right but it does not go as expected when I access the site through the tablet, click run to see what I say better 

function mudarNome2()
{
 if(document.getElementById("buttonhide2").value == "Ocultar Menu")
 {
  document.getElementById("buttonhide2").value = "Mostrar Menu";
 } 
 else
 {
  document.getElementById("buttonhide2").value = "Ocultar Menu";
 }
}


$(document).ready(function(){

$("#buttonhide2").click(function() {

if($("header").css("display")=="none") {
$("header").show();
} else {
$("header").hide();
}

});
});
#buttonhide2 {
  display: block;
  position: absolute;
  width: 115px;
  height: 30px;
  top: 194px;
  right: 0px;
  background: #ba1e1e;
  color:white;
  border:0;
  border-radius: 40px 0 0 40px;
  box-shadow: 0 0 6px 1px black;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype='button'id='buttonhide2'onclick='mudarNome2();'value='OcultarMenu'><header>Aquisomeaoclicarnobotão<br><br>NOPC<br><imgsrc="https://i.imgur.com/WWsdDp7.png" width="150"/>
<br><br>
NO MODO EMULADOR DE TABLET<br>
<img src="https://i.imgur.com/80SE03B.png"width="150"/>
<br><br>
NO TABLET<br>
<img src="https://i.imgur.com/OFSY5B6.png"width="150"/>

</header>
    
asked by anonymous 30.10.2018 / 22:23

1 answer

3

It's probably Webkit (Safari or Android native), just use the property: 

#buttonhide2 {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
    
30.10.2018 / 22:42
html javascript list json data in ul li [closed] Filter elements of a tuple based on a value in a certain index