In the snippet attached the input field has red background. Try entering saved data and its background will default to light bluish color. How can I stop it from defaulting to sky blue while maintaining the functionality of entering saved data?
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<input name="title" id="title" type="text" placeholder="Enter a title here." class="focus:border-transparent focus:ring-0 ring-0 border-transparent focus:border-red-300 required:border-red-500 invalid:border-red-500 p-2 sm:p-4 w-full text-xl sm:text-2xl mt-2 shadow-md bg-red-400 placeholder-white transition-all">
As stated here: https://stackoverflow.com/a/14205976/21232878 by Fareed
you can do it by setting inset box-shadow with no blur
so in your case, add this to your CSS
/* Change the input to any CSS selector you like */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 40px rgb(30 41 59/var(--tw-bg-opacity inset !important;
}
Here is my code in input.tsx
<input type="text" placeholder="Email" class="h-12 px-4 w-full h-12 px-4 placeholder-gray-500 border border-transparent rounded outline-none transition duration-200 text-gray-900 bg-gray-f7 hover:border-gray-400 focus:border-black focus:placeholder-gray-900 mb-10px bg-gray-100 " id="emailAddress" autocomplete="off" name="emailAddress" value="">
"onFocus" blue outline is coming on my UAT (not in localhost);
i.e:
input[type=text]:focus {
outline: 2px solid #2d8cff !important;
outline-offset: 1px !important;
}
I have overrided this CSS with outline:none !important; but CSS is not appearing on UAT server.
Check the css specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There might be some other parent element which is causing this.
Removing outline
How to remove focus border (outline) around text/input boxes? (Chrome)
How to remove the border highlight on an input text element
I'm trying to use a <fieldset> to group some controls. No matter what I do I can't get the border to display. My understanding is it should display by default. In the <style> I've tried setting border-width:1px which does nothing and border:solid draws a border outside of everything including the <legend>. I've tested in both Firefox and Chrome and no difference. What am I missing? Here is an example of my code. I'm playing with different layouts so ignore the inconsistency.
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Project Basics</legend>
<ul>
<li>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</li>
<li>
<label for="txtDescription">Description</label>
<textarea rows=3 cols=20 id="txtDescription"></textarea>
</li>
</ul>
</fieldset>
</div>
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Cost Estimations</legend>
<label for="txtEstTotalHrs">Estimated Total Hours</label>
<input type="text" id="txtEstTotalHrs" />
<label for="txtEstLaborCost">Estimated Labor Costs</label>
<input type="text" id="txtEstLaborCosts" />
</fieldset>
</div>
And this is what I'm seeing, no borders.
Update to comments:
Mushroomator, yes I am using bootstrap. Are you saying to add the whole bootstrap css to the snippet? And I am the designer of the project.
Mike K., Agreed, I am not seeing whats in the plain snippet so something is being overwritten. I wasn't very clear but I did look at the what styles are being applied and at the Fieldset level, if I change the Border setting to 1px it draws an outside box around the fieldset. I added an image from the dev tools.
*JonoJames, I tried adding styling to the tag like this <fieldset style="border-color:black !important; border-style:solid !important"> and I still see nothing. When I look at the dev tools, it shows those attributes set at the Element level but nothing changes on the front end.
This should be a simple problem.
Testing Update: I found the references to the bootstrap css in the _Layout.cshtml file so I started commenting them out , one at a time. The offender seems to be <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> The only reference to fieldset, other than fieldset:disabled, is in this line.
fieldset{min-width:0;padding:10rem;margin:10rem;border:10rem}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}#media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}
I've tried setting all properties to something other than zero but no effect. settings like "10px" or "25rem". Anytime I do get a border, its always an "outside" border like this:
You could add a custom border with CSS
.fieldsetColored{
border-color: #F00;
border-style: solid;
}
<fieldset class="fieldsetColored">
<legend>box</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<label for="txtEstTotalHrs">Estimated Total Hours</label></br>
<input type="text" id="txtEstTotalHrs" /></br>
<label for="txtEstLaborCost">Estimated Labor Costs</label></br>
<input type="text" id="txtEstLaborCosts" /></br>
</tr>
</table>
</fieldset>
You probably have a conflicting style sheet somewhere that turns the border off If its bootstrap use the !important CSS override style attribute
!important
looking at the class list <div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
This looks like bootstrap
Finally figured it out. According to this discussion Fieldset legend does not work everything is turned off for fieldset borders in Bootstrap 5. To get the original alignment of the Legend (inline with the border) you have to set the Legend float:none; and width:auto;
My final CSS looks like this:
fieldset {
margin-bottom: 1em !important;
border: 1px solid #666 !important;
padding:1px !important;
}
legend {
padding: 1px 10px !important;
float:none;
width:auto;
}
Thanks for all your input. Reading through your replies a couple times helped me with my troubleshooting.
This should work!
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3">
Your Title
</legend>
<p>Your content</p>
</fieldset>
I am using Bootstrap 4. My HTML code is like below.
<div class="font-weight-bold col-12">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
Before decrease the browser size my output is like below
After decrease the browser size my output is like below
How can I keep both elements in the same line after I decrease the browser size?
Try like that:
<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
You can read more about bootstrap grid system here.
You can do a few things here:
1) get rid of the "form-control", add a class of your own and set its width using CSS
HTML
<input type="text" class="my-input" />
CSS
.my-input {
width: 100px; // or the width you desire
}
2) Overwrite the CSS of the element inside the media query.
Somewhere in bootstrap CSS you have a selector (of "form-control") inside a media query which gives the input a smaller width. You can create your own media query and selector and overwrite it.
3) Sort of a combination of both. You can just add a class to the input
<input type="text" class="form-control my-input" />
and then add CSS according to the screen width.
It might not be that elegant - but you can also use !important on the width and then it won't be overwritten when the screen size changes.
Like:
.my-input {
width: 100px !important; //again - not elegant, but will do the work
}
Write the CSS for input as:
input {
width: calc(100% - 55px)
}
HTML
<div class="font-weight-bold">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
55px is the width allotted for the label. The input will adjust itself as per the screen and the label width without using any bootstrap also.
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;
}