I have an input group with icon placed before the input. I would lika to change the border of the whole input-group when the input is focused + change the color of the fa-icon
HMTL
<div class="input-group">
<span class="input-group-text" id="basic-addon1">
<fa-icon [icon]="['fas', 'search']" size="1x"></fa-icon>
</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
CSS
.input-group-text{
background-color: white;
color: var(--gray-200);
}
.form-control{
height: 50px;
border-left: 0;
}
.form-control:focus{
box-shadow: none;
border-color: transparent;
border: 1px solid var(--primary-color);
border-left: 0;
}
.form-control:focus + .input-group-text{
border: 1px solid var(--primary-color);
}
.form-control:focus + fa-icon{
color: var(--primary-color);
}
I tried multiple variations of the selector above but i am still unable to change this to the wanted state. I am using bootstrap 5 in angular.
Related
Here, I am trying to change the background color of the input after I write something in the textbox. Whenever I focus, then it will change the background color to white and it will remain white for the rest of time.
<input type="text" class="
.contact-form input,
.contact-form textarea {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
}
.contact-form input:focus {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
background-color: white;
border: 2px solid;
border-color: #207398;
}
<input type="text" class="nameZone" name="name" placeholder="Your Full Name" style="color: black;">
<input type="email" class="emailZone" name="email" placeholder="Your Email" style="color: black;">
<input type="text" class="subjectZone" name="subject" placeholder="Subject" style="color: black;">
<textarea class="messageZone" name="message" placeholder="Message" style="color: black;"></textarea>
Remark: The top part of code is broken?
However, I've assumed you want to kept the gray-ish background while typing in data. I think you could use !important. The :focus part shall be redundant.
.contact-form input, .contact-form textarea {
background-color: #353b48 !important;
}
Snippet is the part of updated code. Btw, your inline css color:black has overrule the internal css color:white.
.contact-form input, .contact-form textarea {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48 !important;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
}
<div class="contact-form">
<input type="text" class="nameZone contact-form" name="name" placeholder="Your Full Name" style="color: black;">
<textarea class="messageZone" name="message" placeholder="Message" style="color: black;"></textarea>
</div>
the following html code is:
.inputBox input:focus ~ input,
.inputBox input:valid ~ input{
border-bottom: 1px solid #0000cd;
}
<div class="inputBox">
<input type="text" name="name" id="name" autocomplete="off" required autofocus>
<label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
</div>
the same thing worked for my label element
i want to change the input's border bottom color to blue
iam asking question for first time idk i described every thing or forgot something to explain
thank you in advance
This will show your bottom border blue
.inputBox input:focus,
.inputBox input:valid {
border-bottom: 2px solid #0000cd;
outline: none;
}
This is if you need to show only the blue border
.inputBox input:focus,
.inputBox input:valid {
border-color: transparent;
border-bottom: 2px solid #0000cd;
outline: none;
}
.inputBox input:focus,
.inputBox input:valid {
border-color: transparent;
border-bottom: 2px solid #0000cd;
outline: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<div class="inputBox">
<input type="text" name="name" id="name" autocomplete="off" required autofocus>
<label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
</div>
Remove the sibling selector ("~ input"). It selects inputs that follow ".inputBox input:focus".
.inputBox input:focus,
.inputBox input:valid{
border-bottom: 1px solid #0000cd;
}
I want to design following material design input form using css and bootstrap. Following code is I am currently using. But it doesn't provide exact result I want.
Code Pen Link : View Source Code Here
HTML CODE :
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
But I want this design :
CSS Only solution; use combination of sibling selector ~ on the label and :valid pseudo selector on the input.
body {
margin: 10px;
}
.form-group>label {
bottom: 34px;
left: 15px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.2s;
pointer-events: none;
}
.form-control:focus~label {
bottom: 55px;
}
.form-control:valid~label {
bottom: 55px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<br>
<div class="form-group">
<input type="text" class="form-control" id="usr" required>
<label for="usr">Name</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" required>
<label for="usr">Password</label>
</div>
</div>
</div>
</div>
Since you've tagged Bootstrap 4, I'm assuming you wanted the solution with regards to that framework.
Setup a default form-group, label, and input markup like this;
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
Then add this css, what this would do is
position label relative to its container (form-group)
then we specified the top and left positions so that it would land
on top of the input field
I added a white background and padding to the label so that it would have a box around the label.
.form-group > label {
top: 18px;
left: 6px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 0.9em;
}
Here's a fiddle with that code on bootstrap 4;
http://jsfiddle.net/rw29jot4/
For the animation, check this fiddle, we need to utilize click events and move the position of the label;
Updated code with animation;
http://jsfiddle.net/sedvo037/
EDIT: Please see my answer below which uses only CSS.
Try with this code.
HTML:
<div class="main_div">
<div class="group">
<input type="text" required="required"/>
<label>Name</label>
</div>
</div>
CSS:
.main_div{
padding: 30px;
}
input,
textarea {
background: none;
color: #c6c6c6;
font-size: 18px;
padding: 10px 10px 10px 15px;
display: block;
width: 320px;
border: none;
border-radius: 10px;
border: 1px solid #c6c6c6;
}
input:hover{
border: 3px solid black;
}
input:focus,
textarea:focus {
outline: none;
border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
top: -5px;
font-size: 12px;
color: #000;
left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 320px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
.group{
position: relative;
}
label {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 15px;
top: 12px;
transition: 300ms ease all;
background-color: #fff;
padding: 0 2px;
}
I am trying to change the border and label color of the form input in materialize css. I followed the documentation but only the first instance of the .input-field div is being changed, the rest are still using the default style.
Codepen
HTML
<div class="input-field">
<input id="account_name" type="text" class="validate">
<label for="account_name">Account Name</label>
</div>
<div class="input-field">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
CSS
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: purple !important;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
EDIT: typo on title
Your CSS is pseudo-selecting inputs with [type=text]. Don't you want to get the ones with type="email" and type="password" too?
I have this div structure and I want to set a CSS class on the input, but it doesn't work.
<div class="form-group">
<label for="tbxName">Name:</label>
<div class="input-group">
<i class="input-group-addon fa fa-id-card-o" aria-hidden="true"></i>
<form:input type="text" path="name" class="form-control errorValidation" id="tbxName" placeholder="Name"></form:input>
</div> <!-- .input-group -->
</div> <!-- form-group-->
This is my style:
.form-control.errorValidation {
border-color: 1px solid red;
}
Use this css.
.form-control.errorValidation
{
border: 1px solid red;
}
UPDATED
Use this html.
<div class="form-group">
<label for="tbxName">Name:</label>
<div class="input-group">
<i class="input-group-addon fa fa-id-card-o" aria-hidden="true"></i>
<input type="text" path="name" class="form-control errorValidation" id="tbxName" placeholder="Name">
</div> <!-- .input-group -->
</div> <!-- form-group-->
Try Working on the Input Tag.
input[type="text"]
{
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 4px;
border-style: inset;
border-image: initial;
border-color: 1px solid red;
}
Maybe this example can help you reason about the styles and how they cascade. It looks like there is more to your template - and that you may be using a framework - so you likely need to override the styles provided by the theme or whatever you are using. To do that, you'll have to create a more specific selector. You can use the developer tools to see how complex the selector is currently... either create a more specific selector to override the styles... or amend the markup to have a cleaner set of classes to style with.
This is how I would approach a form.
https://jsfiddle.net/sheriffderek/at2m1r6v/
markup
<form action='' class='form-name'>
<ul class='field-list'>
<li class='field field-name'>
<label class='input-wrapper' for='input-id-1'>
<span class='label'>Label 1:</span>
<input class='input text' type='text' id='input-id-1' placeholder='...'/>
</label>
</li>
<li class='field field-name error'>
<label class='input-wrapper' for='input-id-2'>
<span class='label'>Label 2:</span>
<input class='input text' type='text' id='input-id-2' placeholder='...'/>
</label>
</li>
</ul>
<input class='submit' type='submit' />
</form>
styles
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.field-list .field {
margin-bottom: 1rem;
}
.field {
border: 1px solid red;
max-width: 300px;
padding: .3rem;
}
.field .input-wrapper {
/* I would just write .input-w */
display: block; /* <label> is inline be default */
border: 1px solid blue;
/* click the label - to see how the input focuses */
padding: .3rem;
}
.input-wrapper .label, .input-wrapper .input {
display: block; /* both inline be default */
width: 100%;
border: 1px solid green;
}
.input-wrapper .label {
font-size: 13px;
margin-bottom: .3rem;
}
.input-wrapper .input.text {
font-size: 16px;
padding: .4rem .5rem;
}
.submit {
margin-top: 1rem;
}
.field.error {
background: rgba(255,0,0,.3);
}