I feel like a beginner. I just don't manage to address the datepicker icon with CSS. There is simply nothing for this in the DOM. I've already tried a few approaches, but without success.
I use the WordPress theme "Bridge" and have already looked for this icon in the Qode Options. Unfortunately I can't find anything.
I copied this out of the chrome dev tools. It is practically the complete container in which the datepicker is located. No: :before, :after or similar to be found:
<div class="column1">
<div class="column_inner">
<div class="qode-cf-date-holder">
<span class="wpcf7-form-control-wrap your-date">
<input type="date" name="your-date" value="2020-10-17" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date required" min="2020-10-17" max="2035-12-31" aria-invalid="false">
</span>
</div>
</div>
</div>
I just want to set the cursor to pointer :D. The icon is placed inside the input element (but I can't see how) that gets generated by contact form 7.
Here is a screenshot of the input field:
You must use CSS Pseudo-elements. Unfortunately, currently the input fields in html do not support this feature.
But you can use this feature in the field's parent. Your code looks something like this. (If you use Font Awesome).
.qode-cf-date-holder {
position: relative;
padding-left: 40px;
}
.qode-cf-date-holder:after {
position: absolute;
font-family: 'Font Awesome 5 Pro';
content: '\f073';
left: 0;
top: 0;
font-size: 16px;
z-index: 999;
}
You can style Pseudo-Elements almost like any other DOM Element, for example you can assign an image to its background.
Without a visual reference a bit hard to answer but have you tried:
input[name="your-date"] {
//css here
}
When I click inside of an input box, I see the following "shadow":
Can this be disabled? If so, how?
EDIT:
GIF
And this is my code
<div class="col-xs-12"><input class="form-control" id="Password" name="Password" type="text" placeholder="Password" /></div>
I think you want to set 'outline: none' on the input css.
The question was answered there: How to remove the border highlight on an input text element
Set border to none or 0. Then for mozilla remove ghost padding.
.myInput {
border: 0;
}
.myInput::-moz-focus-inner {
border: 0;
padding: 0;
}
From the styling, it looks like you're using iOS.
Check out this thread Remove iOs input shadow.
It's a couple years old, but it might help.
I just put
border:none;
And worked, that blue border desapeared
Em maybe you can try to using outline:none,it will kill the the border when user click the input box
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;
}
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}
Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.
Is this possible, if not with HTML5 and CSS3 but using something else.
Here is a very simplistic solution I use as a base with my forms.
<style>
.help {
background-color: #FFFF73;
border-radius: 10px;
display: none;
opacity: 0.9;
padding: 10px;
z-index: 100;
}
.help_link:hover + span {
display: inline;
}
</style>
<form>
<label>Input: <input type="text" name="text" /></label> Help <span class="help">Some help here on this input field.</span><br />
<label>Input: <input type="text" name="text2" /></label> Help <span class="help">Some help here on this input field.</span><br />
</form>
The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.
<input type="text" title="info for user here"/>
You can hover over an input text field and the title will allow a tool-tip type message pop up.