Use Font Awesome Icon in Placeholder - html
Is it possible to use Font Awesome Icon in a Placeholder? I read that HTML isn't allowed in a placeholder. Is there a workaround?
placeholder="<i class='icon-search'></i>"
If you're using FontAwesome 4.7 this should be enough:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Search" style="font-family:Arial, FontAwesome" />
A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).
You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder=""/>
</div>
</form>
With this CSS:
input.empty {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
And this (simple) jQuery
$('#iconified').on('keyup', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
The transition between fonts will not be smooth, however.
I solved with this method:
In the CSS I used this code for the fontAwesome class:
.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}
In the HTML I have added the fontawesome class and the fontawesome icon code inside the placeholder:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
You can see in CodePen.
#Elli's answer can work in FontAwesome 5, but it requires using the correct font name and using the specific CSS for the version you want. For example when using FA5 Free, I could not get it to work if I included the all.css, but it worked fine if I included the solid.css:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<input type="text" placeholder=" Search" style="font-family: Arial, 'Font Awesome 5 Free'" />
For FA5 Pro the font name is 'Font Awesome 5 Pro'
Where supported, you can use the ::input-placeholder pseudoselector combined with ::before.
See an example at:
http://codepen.io/JonFabritius/pen/nHeJg
I was just working on this and came across this article, from which I modified this stuff:
http://davidwalsh.name/html5-placeholder-css
I am using Ember (version 1.7.1) and I needed to both bind the value of the input and have a placeholder that was a FontAwesome icon. The only way to bind the value in Ember (that I know of) is to use the built in helper. But that causes the placeholder to be escaped, "" just shows up just like that, text.
If you are using Ember or not, you need to set the CSS of the input's placeholder to have a font-family of FontAwesome. This is SCSS (using Bourbon for the placeholder styling):
input {
width:96%;
margin:5px 2%;
padding:0 8px;
border:1px solid #444;
border-radius: 14px;
background: #fff;
#include placeholder {
font-family: 'FontAwesome', $gotham;
}
}
If you are just using handlebars, as has been mentioned before you can just set the html entity as the placeholder:
<input id="listFilter" placeholder="" type="text">
If you are using Ember bind the placeholder to a controller property that has the unicode value.
in the template:
{{text-field
id="listFilter"
placeholder=listFilterPlaceholder
value=listFilter}}
on the controller:
listFilter: null,
listFilterPlaceholder: "\uf002"
And the value binding works fine!
Use placeholder="" in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/ .
But you have to make sure add style="font-family: FontAwesome;" in your input.
Anyone wondering about a Font Awesome 5 implementation:
Do not specify a general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here I am using the branch "Brands" for example.
<input style="font-family:'Font Awesome 5 Brands' !important"
type="text" placeholder="">
More detail Use Font Awesome (5) icon in input placeholder text
I know this question it is very old. But I didn't see any simple answer like I used to use.
You just need to add the fas class to the input and put a valid hex in this case  for Font-Awesome's glyph as here <input type="text" class="fas" placeholder="" />
You can find the unicode of each glyph in the official web here.
This is a simple example you don't need css or javascript.
input {
padding: 5px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
<div class="form-group">
<input type="text" class="fas" placeholder="" />
</div>
</form>
I do this by adding fa-placeholder class to input text:
<input type="text" name="search" class="form-control" placeholder="" />
so, in css just add this:
.fa-placholder {
font-family: "FontAwesome"; }
It works well for me.
Update:
To change font while user type in your text input, just add your font after font awesome
.fa-placholder {
font-family: "FontAwesome", "Source Sans Pro"; }
Ignoring the jQuery this can be done using ::placeholder of an input element.
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</div>
</form>
The css part
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }
input.name{ font-family:[font family you want to specify] }
THE BEST PART:
You can have different font family for placeholder and text
If you can / want to use Bootstrap the solution would be input-groups:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="-">
</div>
Looks about like this:input with text-prepend and search symbol
I've solved the problem a bit differently and it works with any FA icon through html code. Instead of all these difficulties with placeholder my solution is:
To place an icon in the usual manner
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">
CSS
.block__icon {
position: absolute;
margin: some-corrections;
}
.block__input {
padding: some-corrections;
}
Then adjust placeholder's text (it's personal for everyone, in my case an icon was just before the text)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
Here is the problem that an icon is above the our input and blocks cursor to click so we should add one more line in our CSS
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
But an icon doesn't disappear together with placeholder so we need to fix it. And also this is the final version of my solution:
HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder=" Some text">
CSS
.block__icon {
position: absolute;
z-index: 2; /* New line */
margin: some-corrections;
}
.block__input {
position: relative; /* New line */
z-index: 2; /* New line */
padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
z-index: 1;
}
It's harder than I thought before, but I hope I've helped anyone with this.
Codepen: https://codepen.io/dzakh/pen/YzKqJvy
There is some slight delay and jank as the font changes in the answer provided by Jason. Using the "change" event instead of "keyup" resolves this issue.
$('#iconified').on('change', function() {
var input = $(this);
if(input.val().length === 0) {
input.addClass('empty');
} else {
input.removeClass('empty');
}
});
I added both text and icon together in a placeholder.
placeholder="Edit "
CSS :
font-family: FontAwesome,'Merriweather Sans', sans-serif;
Teocci solution is as simple as it can be, thus, no need to add any CSS, just add class="fas" for Font Awesome 5, since it adds proper CSS font declaration to the element.
Here's an example for search box within Bootstrap navbar, with search icon added to the both input-group and placeholder (for the sake of demontration, of course, no one would use both at the same time).
Image:
https://i.imgur.com/v4kQJ77.png ">
Code:
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control fas text-right" placeholder="" aria-label="Search string">
<div class="input-group-append">
<button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
</div>
</div>
</form>
Sometimes above all answer not woking, when you can use below trick
.form-group {
position: relative;
}
input {
padding-left: 1rem;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
<div class="form-group">
<input type="text" class="form-control empty" id="iconified" placeholder="search">
<i class="fas fa-search"></i>
</div>
</form>
.form-group {
position: relative;
}
i {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
input {
padding-left: 1rem;
}
Related
Tap on image to get Input file functionality [duplicate]
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page). I found some workaround here, and this interesting one too (but does not work on Chrome =/). What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
This works really well for me: .image-upload>input { display: none; } <div class="image-upload"> <label for="file-input"> <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/> </label> <input id="file-input" type="file" /> </div> Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input. Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean. Tested in Chrome but according to the web should work on all major browsers. :) EDIT: Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
Actually it can be done in pure css and it's pretty easy... HTML Code <label class="filebutton"> Browse For File! <span><input type="file" id="myfile" name="myfile"></span> </label> CSS Styles label.filebutton { width:120px; height:40px; overflow:hidden; position:relative; background-color:#ccc; } label span input { z-index: 999; line-height: 0; font-size: 50px; position: absolute; top: -2px; left: -700px; opacity: 0; filter: alpha(opacity = 0); -ms-filter: "alpha(opacity=0)"; cursor: pointer; _cursor: hand; margin: 0; padding:0; } The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label. When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!) Make sure you test across browsers because they'll all render the input button a slightly different size.
Great solution by #hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows .image-upload > input { visibility:hidden; width:0; height:0 } <div class="image-upload"> <label for="file-input"> <img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/> </label> <input id="file-input" type="file" /> </div> I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag. Seems working for me in all major browsers. Hope it helps someone.
A much better way than writing JS is to use native, and it turns to be lighter than what was suggested: <label> <img src="my-image.png"> <input type="file" name="myfile" style="display:none"> </label> This way the label is automatically connected to the input that is hidden. Clicking on the label is like clicking on the field.
You can replace image automatically with newly selected image. <div class="image-upload"> <label for="file-input"> <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" /> </label> <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" /> </div> <script> function previewFile(input){ var file = $("input[type=file]").get(0).files[0]; if(file){ var reader = new FileReader(); reader.onload = function(){ $("#previewImg").attr("src", reader.result); } reader.readAsDataURL(file); } } </script>
I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles. Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
This is my method if i got your point HTML <label for="FileInput"> <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" /> </label> <form action="upload.php"> <input type="file" id="FileInput" style="cursor: pointer; display: none"/> <input type="submit" id="Up" style="display: none;" /> </form> jQuery <script type="text/javascript"> $( "#FileInput" ).change(function() { $( "#Up" ).click(); }); </script>
I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think. I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin. Run the snippet simply copy and paste the CSS and HTML modify the size as you like. .file-upload{ height:100px; width:100px; margin:40px auto; border:1px solid #f0c0d0; border-radius:100px; overflow:hidden; position:relative; } .file-upload input{ position:absolute; height:400px; width:400px; left:-200px; top:-200px; background:transparent; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .file-upload img{ height:70px; width:70px; margin:15px; } <div class="file-upload"> <!--place upload image/icon first !--> <img src="https://i.stack.imgur.com/dy62M.png" /> <!--place input file last !--> <input type="file" name="somename" /> </div>
its really simple you can try this: $("#image id").click(function(){ $("#input id").click(); });
You can put an image instead, and do it like this: HTML: <img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" /> JQuery: $("#upfile1").click(function () { $("#file1").trigger('click'); }); CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
The input itself is hidden with CSS visibility:hidden. Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear. EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
Working Code: just hide input part and do like this. <div class="ImageUpload"> <label for="FileInput"> <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/> </label> <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/> </div>
form input[type="file"] { display: none; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Simple File Upload</title> <meta name="" content=""> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <label for="fileToUpload"> <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" /> </label> <input type="File" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </body> </html> RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
<script type="text/javascript"> function upl() { var fileSelector = document.createElement('input'); fileSelector.setAttribute('type', 'file'); fileSelector.setAttribute('name', 'uploimg'); fileSelector.setAttribute('accept', 'image/*'); fileSelector.click(); fileSelector.style.display = "none"; fileSelector.onchange = function() { document.getElementById("indicator").innerHTML = "Uploaded"; }; document.getElementById("par_form").appendChild(fileSelector); } </script> <form id="par_form"> <img src="image_url" onclick="upl()"><br> <span id="indicator"></span><br> <input type="submit"> </form>
Change MailChimp's success/error message color
I'm trying to change the success/error message of the mailchimp subscription form (right side-bar) on my website www.justnk.com I can't figure out what's stopping my css code from working/ what in the html might be triggering some automatic pull in that I am unaware of. I've tried rooting around the various answers shown here but most of them deal with changing the text itself not the color.Wordpress.org also had this tutorial (https://wordpress.org/support/topic/change-colour-of-success-message-text/) but I couldn't get it to work. CSS I'm using /Response to form submission/ #mc_embed_signup #mce-responses #mce-error-response #mce-success-response.response {color: #ffffff !important; display: none !important; Mailchimp form html <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"><style type="text/css"> #mc_embed_signup { clear:left; font:14px Helvetica,Arial,sans-serif; }</style> <div id="mc_embed_signup"> <form action="https://justnk.us20.list-manage.com/subscribe/post?u=065434ce0102b8abd6dc55f58&id=2b797af7d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <h6>JOIN THE NEWSLETTER</h6> <p align="center"> My newsletter on the latest from the blog. Don't worry we won't spamming. </p> <div class="indicates_required"> *indicates required </div> <div class="mc-field-group"> <input type="text" value="*First Name" name="FNAME" class="required" id="mce-FNAME" placeholder="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> <input type="email" value="*Email Address" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> </div> <div id="mce-responses" class="clear" color="white"> <div class="response" id="mce-error-response" style="display:none"> </div> <div class="response" id="mce-success-response" style="display:none"> </div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_065434ce0102b8abd6dc55f58_2b797af7d4" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script> <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script> Since the background is bright pink I'd rather the success/error messages be green and grey respectively so I'd like it to be white.
Let's break down things, so it will be easier for you. If you only need to change the font color, you need to target the message area. The message area uses classes #mc_embed_signup (which notes that this is the id of that whole field) and #mce-success-response (which means in that field of the signup you want to target only the success message). In this case, enter this CSS code into the "Additional CSS" part of Wordpress Customizer: #mc_embed_signup #mce-success-response { color: white; } As you will see, the success message font will be white. You can change it to any other color and also use HEX color codes (help yourself with this page). If you also need to change the error message, then instead of #mce-success-response use #mce-error-response. Check this page on CSS "color" property. If you want to add a background to this field, you use the same code as above, but instead of color: you use background-color: - the same applies as above. Use a HEX color code and specify what color of background do you want. But if you add this code, you may see that there will be no breathing space in the field: This is because the field isn't prepared for the background color, so you have to target the class of that field (which is div.response) and change the padding of it. So you can use this code: #mc_embed_signup div.response { padding: 1em 1em 1em 1em; } So if we sum it up. If you want to change the color of the font and change the background color of it, you use this code: #mc_embed_signup #mce-success-response { color: white; background-color: blue; } This says that the success message field will have a white font color and have a blue background color. For the error message, you need to use #mce-error-response tag (#mc_embed_signup #mce-error-response). If you want to add some padding to it, use the above code I wrote and change it to your desire (you can use 0.5em or 1.2em etc). For more about this, read some articles here - this one is about padding property, this is about "em" unit and you have some articles above for HEX codes and text colors.
That worked! Just need to add this to Mailchimp html code itself, under the style: <style type="text/css"> #mc_embed_signup #mce-success-response { color: white; font-weight: 700; text-transform: uppercase; } </style>
CSS Elements working on actual page but not pulling from stylesheet
I am having some issues with some css stylings on my site and hoping you guys can help. Heres my code: <style> .loginform { text-align: center; width: 300px; margin: 0 auto; color: black; } .memberslogin { color: #404040; text-align: center; margin-bottom: 25px; } .btn.btn-primary.loginbutton { margin-bottom: 80px; } </style> <body style="background: none;"> <?php include('header.php') ?> <div class="container"> <h4 class="memberslogin">Members Login:</h4> <form class="loginform" action="login_create.php" method="post"> <div class="form-group"> <label for="username">Username:</label> <input type="text" name="username" class="form-control" placeholder="Username.."> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" name="password" class="form-control" placeholder="Password.."> </div> <input class=" btn btn-primary loginbutton" type="submit" name="submit" value="Login"> </form> </div> The styling works fine when styled within the page. However I have these exact same classes and styling within my style.css but when I remove the on page styling none of the effects take place. <head> <title>Title</title> <link href="https://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="richmondcss.css"> As you can see I have linked my style sheet last which should override any bootstrap elements if I am not mistaken? Any help is appreciated Thanks
Try adding a class on the body tag which will represent your app. e.g. <body class="the-login-app">... and then prefix all of your custom css with this class... .the-login-app .btn.btn-primary.loginbutton{ margin-bottom: 80px; } This is called namespacing. It will not only work but help you with debugging as your project gets bigger. For example if you see an element in debugger hit by a class which starts with "the-login-app" you are confident that css code is yours :) In the end, try to research and familiarize with the priority of the selectors... All things equal, in-file one will precede. If you want to override bootstrap you need to define more precise selector than bootstrap one, as explained above(which I don't recommend to start with)... Try to learn bootstrap more. I am sure you will discover that you didn't need your intervention at all...
Font Awesome icon in input placeholder not working
I am trying to use Font Awesome icons in the input placeholder. I tried this but not working. <body> <input type="text" placeholder="" style="font-family:FontAwesome"/> </body> What’s wrong with this? I am getting some weird number in the placeholder instead of icon.
You can add font awesome icon as like that <input type="text" placeholder="" style="font-family:Arial, FontAwesome" /> you can also check out the fiddle Fiddle click here
You can also use an icon outside of placeholder, placed with HTML. Here is my solution: HTML <i class="fas fa-search form__icon"></i> <input type="text" name="search" class="form__input" placeholder=" Search"> CSS .form__icon { position: absolute; pointer-events: none; z-index: 2; } .form__input { position: relative; z-index: 3; } .form__input:placeholder-shown { z-index: 1; } It's a bit complex, but it also give a possibility to use animated, rotated and flipped icons. Check my CodePen: https://codepen.io/dzakh/pen/YzKqJvy
When you try to use a font icon and what you get is some weird character, this is probably due to the fact that the browser tries to render that icon with a wrong font. Check what your input's font-family is when rendered by inspecting the element, and then going into the 'Computed' tab (Chrome: Right click -> Inspect Element -> Computed). If it's not font-awesome, but you think you set it, try to use font-family: FontAwesome !important;. This will override any of the possible input's parrent font-family setting.
IE8 displaying wrong piece of CSS sprite
There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers. Heres the CSS div.searchForm input[type=text] { border: 0; padding: 0 10px; margin: 0; background: url(../img/sprite.png) 0 -125px no-repeat; background-size: 115% 235px; width: 600px; height: 30px; float: left; font-size: 12px; color: #fff; -webkit-appearance: none; -webkit-border-radius: 0; } and the html: <section id="secondary6"> <h1 class="hidden">Search</h1> <div class="clearfix"> <div class="grid_4"> <nav class="grid_2 secondary"> <h1 class="hidden">Search Secondary Navigation</h1> </nav> <div class="searchForm"> <input type="text" placeholder="search"> <input type="button"> <input type="submit" class="hidden" > </div> </div> </div> </section> basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field? for example.. div.searchForm input.classInput { /* css code here */ } Also ... ..where is element form tag wrapper, form name, form action ? The input fields should not reside in a document on a way You presented.. without form tag.. Which software actually generated this code for You? Is it dreamweaver? Basic and proper example of valid HTML input form .. <form id="formID" name="formName" method="post" action="#"> <input type="text" name="textUno" value="" /> <input type="text" name="textDue" value="" /> <button type="submit" name="do_processing"> Go! </button> </form>