I have developed a custom code input UI , where the user needs to enter the code they receive on their mobile, i was using a package before but on IOS there is an autofill feature which didn't work because there were 5 different inputs instead of just one so i had to resort to custom solution.
I created an input with boxes as background image which works great the only issue is after max length is reached the cursor was pointing for another input , as a result it messed up the input field,let me show you my code
HTML
<input class="ios" type="tel" maxlength="5" pattern="[0-9]*" inputmode="numeric"/>
CSS
.ios{
background: url("https://i.imgur.com/AGzHqot.png");
width: 280px;
height: 48px;
border: none;
padding-left: 19px;
letter-spacing: 45px;
background-repeat: no-repeat;
background-size: 100% 100%;
font-family: 'Roboto';
font-weight:500;
font-size:20px;
}
.ios:focus, .ios:focus, .ios:focus{}
outline: none}
Fiddle
Please use the fiddle for replication of issue, enter upto 6 characters you'll see the issue
Hope it's work !!!
you can achieve your goal using small jQuery function.
jQuery(document).ready(function(){
jQuery('.ios').keyup(function (event) {
var myLength = jQuery(this).val().length;
if(myLength ==1){
jQuery(this).next('.ios').focus();
}
});
});
* {box-sizing: border-box;}
.ios {border: 2px solid #efefef; border-radius: 5px; width: 40px; height: 40px; font-size:20px; text-align: center;}
.ios:focus, .ios:focus, .ios:focus{outline: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
<input class="ios" type="tel" maxlength="1" pattern="[0-9]*" inputmode="numeric"/>
</div>
I have a problem with my project
I would like to open the input file on "Enter" key to improve some accessibility.
I've added tabindex on label because when I jump in to this label by using tab and press "enter" I would like to fire function which will open the input file picker.
.input {
position: absolute;
visibility: hidden;
}
<input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true" />
<label class="btn" for="input" tabindex="0">
<span class="upload label">
<span class="label__text" data-label="Upload file" data-next-label="Upload next file">Upload file</span>
</span>
</label>
Warning the following is just a quick idea of how to achieve this by styling the actual input and visually hiding the label (to ensure it is still accessible).
However there are lots of accessibility issues you still need to consider, showing which file was selected for example.
But this does show you how you can style the input to keep all the native functionality without having to re implement it yourself (active state for example, which I styled here). Also don't forget a custom focus indicator, input:focus::before.
There are other issues such as browser support to consider as well, however in theory this should fall back reasonably gracefully, I just haven't tested it.
This codepen gives a good starting point on how to implement some of the features this is missing such as showing the file name selected.
input{
color: transparent;
width:150px;
height:28px
}
input::-webkit-file-upload-button {
visibility: hidden;
}
input::before {
content: 'Select a PDF';
color: black;
display: inline-block;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
width:132px;
}
input:hover::before {
border-color: black;
}
input:active {
outline: 0;
}
label {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
<input id="input" class="input" name="newFile" type="file" accept=".pdf" data-required="true"/>
<label for="input">upload file</label>
Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.
I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code
How do I put an icon inside a form's input element?
Live version at: Tidal Force theme
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.
In other words, they have these two CSS rules:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
The CSS solutions posted by others are the best way to accomplish this.
If that should give you any problems (read Internet Explorer 6), you can also use a borderless input inside of a div.
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
It is not as "clean", but it should work on older browsers.
A solution without background-images:
.icon {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}
<input type="text" class="icon" value placeholder="Search">
Or for right to left icon
.icon-rtl {
padding-right: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
background-size: 20px;
}
<input type="text" class="icon-rtl" value placeholder="Search">
You can try this:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
I find this to be the best and cleanest solution. Using text-indent on the input element:
#icon {
background-image: url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
A simple and easy way to position an icon inside of an input is to use the position CSS property as shown in the code below.
Note: I have simplified the code for clarity purposes.
Create the container surrounding the input and icon.
Set the container position as relative
Set the icon as position absolute. This will position the icon relative to the surrounding container.
Use either top, left, bottom, right to position the icon in the container.
Set the padding inside the input so the text does not overlap the icon.
#input-container {
position: relative;
}
#input-container > img {
position: absolute;
top: 12px;
left: 15px;
}
#input-container > input {
padding-left: 40px;
}
<div id="input-container">
<img/>
<input/>
</div>
This works for me:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
Use:
.icon{
background: url(1.jpg) no-repeat;
padding-left: 25px;
}
Add the above tags into your CSS file and use the specified class.
Use this CSS class for your input at the start, and then customize accordingly:
.inp-icon {
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
}
<input class="inp-icon" type="text">
You can try this: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
<div class="container">
<form>
<div class="row">
<div class="input-group mb-3 col-sm-6">
<input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
</form>
</div>
I achieved this with the code below.
First, you flex the container which makes the input and the icon be on the same line. Aligning items makes them be on the same level.
Then, make the input take up 100% of the width regardless. Give the icon absolute positioning which allows it to overlap with the input.
Then add right padding to the input so the text typed in doesn't get to the icon. And finally use the right CSS property to give the icon some space from the edge of the input.
Note: The Icon tag could be a real icon if you are working with ReactJs or a placeholder for any other way you work with icons in your project.
.inputContainer {
display: flex;
align-items: center;
position: relative;
}
.input {
width: 100%;
padding-right: 40px;
}
.inputIcon {
position: absolute;
right: 10px;
}
<div class="inputContainer">
<input class="input" />
<Icon class="inputIcon" />
</div>
Just use the background property in your CSS.
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
I had situation like this. It didn't work because of background: #ebebeb;. I wanted to put background on the input field and that property was constantly showing up on the top of the background image, and i couldn't see the image! So, I moved the background property to be above the background-image property and it worked.
input[type='text'] {
border: 0;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
background: #ebebeb;
}
Solution for my case was:
input[type='text'] {
border: 0;
background: #ebebeb;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
}
Just to mention, border, padding and text-align properties are not important for the solution. I just replicated my original code.
Using with font-icon
<input name="foo" type="text" placeholder="">
OR
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
I was able to add an icon to an input field by adding the icon as a background image through CSS. From there, you can adjust the size of the image using the background-size property and finally, position the element with the background-position-x and background-position-y properties. I've shared a code snippet below and linked to a working example in Codepen here:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.input-container {
padding: 50px;
}
input {
box-sizing: border-box;
width: 250px;
padding-left: 36px;
height: 48px;
background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg');
background-size: 20px;
background-position-x: 10px;
background-position-y: 50%;
background-repeat: no-repeat;
border-radius: 15px;
}
<!DOCTYPE>
<html>
<head>
<title>Icon Inside Input Field</title>
</head>
<body>
<div class="input-container">
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" placeholder="iram.the.goat#mailer.com">
</div>
</body>
</html>
https://codepen.io/Iram_Tech/pen/GRQqrNg
<label for="fileEdit">
<i class="fa fa-cloud-upload">
</i>
<input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
</label>
For example you can use this : label with hidden input (icon is present).
I didn't want to change the background of my input text neither. It will work with my SVG icon.
I added a negative margin to the icon, so it appeared inside the input box.
And adding the same value padding to the input, so the text wouldn't go under the icon.
<div class="search-input-container">
<input
type="text"
class="search-input"
style="padding-right : 30px;"
/>
<img
src="#/assets/search-icon.svg"
style="margin-left: -30px;"
/>
</div>
The inline-style is for readability. Consider using classes.
You could go for a different approach which also allows you to click it and have it do a function. Have a look at the example below:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #FFF; /* CSS Edit Here */
}
#search-bar > button {
background: #FFF;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
The CSS background solutions do it for most cases, but it has a problem with WebKit (chrome) autocomplete where the icon disappear.
There are other solutions that includes changing the HTML/DOM structure by wrapping the input in a div and adding an extra element (img, div, or similar).
I don't like does solutions because you need to tweak the elements CSS with absolute positions and/or resizing by pixel to get the right place.
Or recreate the input border to "merge" input and img in one.
So this solution is based on a CSS background image not applied over the input element, but applied over a wrapper div.
HTML:
<div class="input-email">
<input type="text" placeholder="Email" name="email" id="email">
</div>
CSS:
.input-email {
background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
display: inline-block;
}
.input-email input{
padding-left: 40px;
background-color: transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
This way with .input-email class I define my icon image as div background (not affected by WebKit autocomplete background).
Next .input-email input definition I pad left the input element to give space for the image and set it as transparent (this works when autocomplete is not applied)
Finally with webkit-autofill classes I remove with transition the background-color set by the autocomplete.
Note: at point 2 I set transparent !important because this -internal-autofill-selected gets rendered at browser and I couldn't overwrite it without setting my also as !important:
input:-internal-autofill-selected {
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
I got my solution from this post https://www.py4u.net/discuss/1069380.
I have make some tweaks, though major credits are to them.
In case, if you have <i class=''></i> with imported fonts, background: ... (some png) implementation will not be suited for you.
So try this one:
<div class="parent">
<form action='' method='post'>
<i class="fa-solid fa-paperclip"></i>
<input type="text" name="message" placeholder="Type...">
</form>
</div>
.parent > form > i {
position: absolute;
}
.parent > form > input {
text-indent: 40px
}
then, use margin to set Icon inside and text-indent to move placeholder's text.
...
...
Here is full example of my code
.parent {
width: 100%;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.parent > form > i {
margin-left: 24px;
margin-top: 13px;
position: absolute;
}
.parent > form > input {
width: 70%;
height: 40px;
margin-left: 8px;
text-indent: 40px;
}
.input_container {
display: flex;
border-bottom: solid 1px grey;
transition: border-color 0.1s ease-in;
background: white;
}
.input {
color: blue;
display: block;
width: calc(100% - 20px);
border: none;
outline: none;
padding: 8px 16px;
}
.input_img {
flex-basis: 20px;
display: inline-block;
padding: 8px 16px;
cursor: pointer;
}
<div class="input_container">
<input type="text" class="input" value>
<span class="input_img" data-role="toggle">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
fill="currentColor"
/>
</svg>
</span>
</div>
This works for me for more or less standard forms:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
Small problem. I want to set the labels to the left infront of the input boxes so they are within the same line.
Any help would be great.
My HTML:
<div class="row">
<div class="col-12">
<label for="fname">First Name</label>
<input type="text" class="form-control input-lg" name="FNAME" id="FNAME">
</div>
</div>
<div class="row">
<div class="col-12">
<label for="lname">Last Name</label>
<input type="text" class="form-control input-lg" name="LNAME" id="LNAME">
</div>
</div>
Jquery I have tried:
$('.row.col-12 label').each(function() {
$(this).insertBefore( $(this).next('input') );
});
What the form looks like:
enter link description here
Some CSS:
form-group {
margin-bottom:15px;
}
.col-12 {
width:100%
}
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
textarea.input-lg {
height: auto;
}
I'm trying to understand your problem but simply put your DOM into the fiddle, each label is in the same line as each textbox.
jsfiddle.net/TWfDs
But if you meant that first name and last name should be in the same one line, you can try below.
$(".row").css({"display":"inline-block"});
http://jsfiddle.net/TWfDs/1/
----- update ----
If you can still style via js and it is acceptable to set the static width for the textbox then label and textbox line up.
http://jsfiddle.net/TWfDs/10/
$("#FNAME").css({"display":"inline-block", "width":"300px"});