Hey everyone, I’ve been having this issue where I’m seeing the search icon looking differently on my site in my iPad. On desktop it’s as I want it, but it does not look same on iPad, and am wondering why. I have tried -webkit-appearance:none; but it doesn’t help.
Here is a link to my page https://iwriteonwheels.tumblr.com/
And a screenshot of the problem from iPad
what browsers?
@m_hutley Firefox in both devices.
You are using an html entity for the search icon and it will appear differently depending on browser and font.
I believe you are already linking to font-awesome (I haven’t double checked) but you would get consistent results using the search icon from the font-awesome set instead.
If I have mis-remembered then maybe just use an image/svg for the search icon. You should be able to find one quite easily. 
@PaulOB yeah I think it uses font awesome. But still should be able to make it look the same. I don’t see why not. 
No, If I’m looking at the right thing you are using this html entity. 
︎
Font awesome is added using the appropriate class assuming you are linking to the font awesome library and will be more consistent cross browser.
So you suggest using svg instead
No, he’s saying use font awesome since you’re already using it. This generates the search icon.
<i class="fas fa-search"></i>
As the icon needs to go on a submit you can do it like this.
<input class="testinput fa fa-search" id="tap" type="submit" name="b1" value="">
However you will need to giver it a color and if you want the purple background as in Firefox you will need this also.
.search input.fa-search{
color:#ccc;
background:transparent;
}
Note that your icon currently does not display in chrome because you set the color to transparent so it is invisible. Also the background is gray in Chrome also. The code I gave you above will rectify some of that but you might need to set the background color or gradient you want…
Ok, I’ll give it a go and see how it does. Thank you @PaulOB
@PaulOB so instead of this
.search input[value="🔍︎"] {
background-image: linear-gradient(to bottom right, #fff, #000);
background-clip:text;
-webkit-text-stroke: 1px transparent;
color:transparent;
}
Replace that with this one?
.search input.fa-search{
color:#ccc;
background:transparent;
}
Just making sure I understand it right.
The first rule will be ignored anyway once you have added the new value I gave you in the input html.
value=""
The new css will take affect when you add the new classes and you can use that rule to tweak the styling to suit.
Right. It’s working well now, thanks again.
When we say @media screen and (max-width: 799px) { does it mean 799px x another px? Also, how to rid the player from my phone, if it has the <template> tag with it and its <style> tag?
It means that at 799px and smaller the css in the media query will be applied.
You can’t really check for devices without a lot of ‘iffy’ scripting. You just have to remove it based on screen width. e.g. remove it at a width when it no longer looks suitable.
The template tag is already display:none its the audio element that follows the template tag where the code is inserted you would set that to display:none and it will be gone.
Or you could change your script so it only applies the player at larger screen sizes. You would need to use matchMedia js but is probably a new question for this js forum most likely.
I looked at it from my phone and it’s already not looking suitable. I mean, I don’t want it to be on phone anyway…
I was asking about the media query cause I wanted to know which of the ones I have would be the one to put the audio player in for it to not appear on my phone, like at 799px or 768px
I’ve just added it with display:none to both the 799px and 768px media queries, but it’s still showing on phone.
I don’t see any code for it.
If I add this it disappears straight away.
@media screen and (max-width:1300px){
audio-player{display:none}
}
I used 1300px because as far as I can see it overlaps your search bar at anything less but please change to suit.
@PaulOB here
@media screen and (max-width: 799px) {
button {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
outline: none;
width: 40px;
height: 40px;
float: left;
}
#audio-player-container {
display:none;
border-width: 3px;
border-style: solid;
border-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(60%, blueviolet), color-stop(60%, blueviolet), color-stop(80%, blueviolet), color-stop(80%, blueviolet), color-stop(80%, blueviolet), color-stop(100%, blueviolet)) 1 stretch repeat;
position: fixed;
margin:0;
bottom: -0.2em;
right: 0.5em;
transform-origin: 100% 100%;
width: 95%;
max-width: 804.5px;
height: 79px;
background: linear-gradient(to bottom right,
#audio-player-container {
display:none;
border-width: 3px;
border-style: solid;
border-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(1.5%, #50f), color-stop(60%, blueviolet), color-stop(60%, blueviolet), color-stop(80%, blueviolet), color-stop(80%, blueviolet), color-stop(80%, blueviolet), color-stop(100%, blueviolet)) 1 stretch repeat;
position: fixed;
margin:0;
bottom: -0.2em;
right: 0.5em;
transform-origin: 100% 100%;
width: 95%;
max-width: 804.5px;
height: 79px;
background: linear-gradient(to bottom right,
Do you mean it disappears on phone straight away? The 2nd css is the 768px media query. Sorry forgot to add that.
It disappears on every device that is smaller than 1300px.
If you make it disappear at 799px then there is no need to make it disappear at 768px!!! It is already gone for everything at 799px and smaller.
You aren’t targeting the right element do check the code I gave. You don’t have to repeat every single style either. If it’s display :none then nothing else matters.
You seem to be a bit blinkered with your devices. Essentially no one has a screen the same size as you and if they do they may have their browser windows arranged differently.
Stop thinking about devices and think about how the design fits in the available space. I’ve mentioned this many many times now and you need to grab your browser window and simply open it wide to small and then you see how it fits or doesn’t fit. It’s then up to you to make it fit across the whole range of screen sizes.