CSS How to change input font-size

Question

The font-size of the input tag wont increase. I know it's following the browser/os set rules, but shouldn't it be able to be overridden?

 <style> input[type="search"] { font-size:50px; } </style> <form class="search-box" action="https://www.google.com/search"> <input type="search" name="q" placeholder=" welcome back" value="" autocomplete="off" autofocus> </form> 

Result

https://imgur.com/a/iegRUl3

Answer 1

Apple does apple stuff. https://developer.mozilla.org/es/docs/Web/CSS/-moz-appearance

input[type=search]{
   -moz-appearance: none;/* older firefox */
   -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
   appearance: none; /* rest */
}

Answer 2

I've just created a jsfiddle of your code, and it works as expected. I believe there is some other css rule overwriting your rule.

So you can try adding !important to your rule, eg:

input[type="search"]
{
  font-size:50px !important;
}

Answer 3

Add a class to the input like:

 <style type="text/css"> .search{ font-size:50px; } 

 <form class="search-box" action="https://www.google.com/search"> <input class="search" type="search" name="q" placeholder=" welcome back" value="" autocomplete="off" autofocus>