is there any way to achieve something like this:
I've tried options that I found here in stack (with using span) but even if i made it work it is impossible for me to do that white line on the right from icon, can someone help me?
My current code looks like that:
<form>
<input type="text" name="firstname" placeholder="Name">
<input type="text" name="firstname" placeholder="e-mail">
<input type="text" name="firstname" placeholder="website">
</form>
I've also tried adding that icon in container with borders to achieve effect:
<form>
<span class="form_frame"><i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
<input type="text" name="firstname" placeholder="Name">
And css:
.form_frame {
height: 60px;
border-width: 1px solid;
border-color: white;
width: 100%;
background-color: #2b2b2b;
But no succes
Thank's for any help.
Add the icon and the input inside a span. You can then add a border to the whole span if you want to our you can put a border on just the icon or input box.
.fa-address-book-o {
border: solid;
border-color: red;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<span><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"/></span>
You can use Labels
I thinks this is a good start.
.wr{border:2px solid black;padding:12px;}
<form>
<diV class="wr">
<label for="user"> <i class="fa fa-camera-retro">(icon_img)</i></label><input type="text" name="user" placeholder="Username"/> </diV>
<div class="wr">
<label for="pass"> <i class="fa fa-futbol-o">(icon_img)</i></label><input type="password" name="password" placeholder="Password"/> </div>
</form>
Related
it is a simple problem but i can't get through it, i am trying to highlight an input box when its focused, but all the div as i styled it differently to add icons inside of it.
here is my code:
input:focus .form-input {
border: 2px solid var(--theme-color);
}
<form>
<div class="form-input">
<i class="fa fa-user"></i>
<input type="text" id="username" name="username" placeholder="Enter Your Username"><br>
</div>
<div class="form-input">
<i class="fa fa-user"></i>
<input type="password" id="password" name="password" placeholder="Enter Your Password">
</div>
</form>
As soon as we have widespread browser support for :has(), a solution would look like this:
.form-input:has(input:focus) {
border: 2px solid orange;
}
<div class="form-input">
<input type="text" id="username" name="username" placeholder="Enter Your Username" />
</div>
Currently this is only supported in Safari 15.4+ though, but it will soon come to all major browsers.
Until we have that, you can still work with the well-supported :focus-within pseudo class:
.form-input:focus-within {
border: 2px solid orange;
}
<div class="form-input">
<input type="text" id="username" name="username" placeholder="Enter Your Username" />
</div>
Please note that this solution comes with the drawback of triggering on any focusable element within div.form-control. You cannot limit it to certain elements.
The element you are trying to style (div.form-input) is the parent of that input. As far as I know there's currently no way for selecting parent elements based on child state in CSS (or at least not supported by all browsers).
You'd have to rely on js for that:
function highlight(evt) {
// get parent with class .form-input
var parent = evt.target.closest('.form-input');
if (parent) {
if (evt.type === 'focus') {
// add highlight class on focus
parent.classList.add('highlight');
} else {
// remove highlight class on blur
parent.classList.remove('highlight');
}
}
}
// get all inputs of the form
document.querySelectorAll('form input')
.forEach((input) => {
// attach focus and blur events to toggle highlight class
input.addEventListener('focus', highlight, true);
input.addEventListener('blur', highlight, true);
});
.form-input {
display: inline-block;
padding: 5px;
border: 2px solid rgba(0,0,0,.1);
}
.form-input.highlight {
border: 2px solid #000;
}
<form>
<div class="form-input">
<i class="fa fa-user"></i>
<input
type="text"
id="username"
name="username"
placeholder="Enter Your Username"
/><br />
</div>
<div class="form-input">
<i class="fa fa-user"></i>
<input
type="password"
id="password"
name="password"
placeholder="Enter Your Password"
/>
</div>
</form>
I'm trying to create an input with an icon indicating its purpose, but it's not rendering how I like:
I want the input at the same level as the icon, however, dispite my best efforts:
.field
{
margin: auto;
border-radius: 10px;
width: 67%;
white-space: nowrap;
overflow-x: auto;
}
.field input, .field label
{
display: inline-block !important;
margin: 0;
padding: 0;
}
<div class = 'field w3-bar w3-center w3-border w3-border-green'>
<label class='w3-bar-item w3-left w3-border-right w3-border-green fas fa-user' for='username'></label>
<input class="w3-bar-item w3-right w3-input w3-border-green w3-hover-border-green no-box" id="username" name="username" required type="text" value="">
</div>
— it still renders on a new line! Note that I'm using w3.css and font-awesome. Is there something I'm missing? Thank you.
How about like this?
.custom-input{
display:inline-block;
margin-left:12px;
}
.input-component{
border:3px solid teal;
padding:8px;
padding-left:30px;
}
.input-icon{
color:teal;
position:absolute;
margin-right:-30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="custom-input">
<span class="glyphicon glyphicon-user input-icon"></span>
<input class="input-component" placeholder="username...">
</div>
<div class="custom-input">
<span class="glyphicon glyphicon-calendar input-icon"></span>
<input class="input-component" type="date">
</div>
<br>
<br>
<div class="custom-input">
<span class="glyphicon glyphicon-lock input-icon"></span>
<input class="input-component" type="password" placeholder="password"/>
</div>
You can minimize the code to something like this:
<div style="width: 67%;display:flex; align-items:center;" class ="w3-padding w3-margin w3-border w3-border-green w3-round-large">
<label style="width:10%" class="w3-center w3-border-right w3-border-green fa fa-user" for="username"></label>
<input style="width:80% " class="w3-input" id="username" name="username" required type="text" value="">
</div>
And you don't need define the class "field" and the others.
I have a bootstrap input field and a font awesome edin icon. Currently the icon is displayed below the input box. What I am trying to do is to display them on one line. Sadly, as basic as this is, i can't make it work. I tried with floating the elements, giving them an inline-block and other thing, which didn't work.
Please, help :
<div class="col-sm-2">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>
According to the bootstrap documentation (http://getbootstrap.com/css/#forms-inline) you can use the input group with an addon to put the icon inside the addon:
<div class="input-group">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
<div class="input-group-addon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
</div>
You should try display: flex; on the container and <i> tag & align-self: center; only on the <i>.
Here an example:
.col-sm-2 {
display: flex;
}
.col-sm-2 > i {
display: flex;
align-self: center;
width: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-2">
<i class="fa fa-pencil" aria-hidden="true"></i>
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
</div>
Fiddle demo
I have a simple solution by css. Firstly add a new class to column.
HTML=>>>
<div class="col-sm-2 myForm">
<input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>
CSS=>>>
.myForm .form-control{
float:left;
width:calc(100% - 35px);
}
.myForm .fa{
float:right;
width:30px;
}
Try this ...
Here is the live demo on jsfiddle
Better solution is bootstrap form css. Follow this link:
http://getbootstrap.com/css/#forms
Trying to change the border color for error message. this is my html code
<div class="form-group">
<label>Name:</label>
<div class="wpr">
<div class="wpr__icon">
<i class="fa fa-user"></i>
</div>
<input #name="ngModel" id="name" name="name" type="text" class="form-control text-line" [(ngModel)]="PersonInfo.name"
pattern="[a-zA-Z0-9\s]+" required>
</div>
<ul class="alert-error" *ngIf="name.touched && name.errors">
<li *ngIf="name.errors.required"> Name is required. </li>
<li *ngIf="name.errors.pattern">Invalid name.</li>
</ul>
</div>
Currently error messages are showing up, but I want to change the textbox border-color to red. How to do that.
Here is another solution.
input.ng-invalid.ng-touched {
border: 1px solid red;
}
If you inspect your input field, you can see some css classes that Angular dynamically attach to your element that you can take advantage of.
You can use ngClass directive to add css class to your input field when it is invalid:
<input #name="ngModel" id="name" name="name" type="text" class="form-control text-line"
[ngClass]="{'red-border-class': name.errors}" [(ngModel)]="PersonInfo.name" pattern="[a-zA-Z0-9\s]+" required>
Hope you don't need help writing css. :-)
Just find .alert-error class in css file and add border property.
.alert-error{
...
border:1px solid red;
color:red;
}
We can achieve different ways, but I personally preferred the following way.
HTML
<form [ngClass]="{ 'form-submit': isSubmit}" (ngSubmit)="onSubmit()" name="forgotPasswordForm" [formGroup]="forgotPasswordForm">
<input name="email" type="email" class="form-control" id="email" placeholder="Email" formControlName="email">
<div class="invalid-feedback form-error" *ngIf="...">
.......
</div>
</form>
CSS:
.form-group input.ng-invalid.ng-touched,
.form-group input.ng-invalid:focus,
.form-group select.ng-invalid.ng-touched,
.form-group textarea.ng-invalid.ng-touched,
.form-submit input.ng-invalid,
.form-submit select.ng-invalid,
.form-submit textarea.ng-invalid
{
border-color: #ff4c6a;
}
.invalid-feedback.form-error {
display: block;
}
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>