My OperaThe My Opera forums have been replaced with forums.opera.com. Please head over there to discuss Opera's products and features
See the new ForumsYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
How to fix weird character in input and it's placeholder?
Hi allI've got trouble using custom @font-face. There are weird symbols instead of space characters both in placeholder and input's text. I realize that this is caused by my custom font usage (of course I've cleaned the font up for making it smaller). But I have no idea how to get the #Unicode of the missing symbol. But I know for sure that it's neither space nor non-breaking space (#00a0).
This happens only in Opera (i currently use 11.51 version). IE, FF, Chrome, Safari performed well.
HTML code of the search form displayed above:
<form id="site-search" method="get" action="/">
<input id="search-input" type="search" value="" name="q" size="5" required placeholder="site search" />
<input id="search-submit" type="image" src="img/search-icon.png" value="" />
</form>
And here is it's CSS:
#site-search{
width: 510px; position: absolute; left: 35px; top: 371px; background: rgba(255, 255, 196, 0.5);
border-radius: 3px; box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,0.1); outline: none;
}
#site-search:hover{
background: rgba(255, 255, 196, 0.25);
}
#search-input{
width: 474px; background: transparent; margin: 0 4px; border: none;
font: 15px 'myfont', 'Trebuchet MS', sans-serif; font-style: italic; color: #6d735d;
text-shadow: 1px 1px 0px rgba(163, 192, 44, 0.25); outline: none;
}
#search-input{
-webkit-appearance: none;
}