I have this code in HTML:
<div class="firstname-input">
<input type="text" id="firstname" name="firstname" placeholder="First name">
<button onclick="showName()"><figure></figure></button>
</div>
I want to add border: 2px solid #f90; to .firstname-input, at focus the input
And if I write this:
.firstname-input input:focus .firstname-input {
opacity: .1;
}
This isn't working.
Use
.firstname-input:focus-within {}
and add your chosen styles
Related
I'm trying to customize the style of the login form, but I can't apply the :focus rule. Could someone be so kind as to explain to me why it's not working? I don't understand what I'm doing wrong, sorry, but I'm new to all this.
/*Label Style*/
.login_form_fields input:focus + label {
color: blue;
}
/*Input Style*/
.login_form_fields input {
border-radius: 2px;
background: #fff;
border: 1px solid #E3E3E3;
}
.login_form_fields input:focus {
border: 1px solid blue;
}
<form id="login-form" method="post">
<div class="login_form_fields uname">
<label for="username">Username o Email:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="login_form_fields pswrd">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button class="login_button" type="submit">Accedi</button>
</form>
</div>
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>
This is my html form inside a card html. This form appears after an onlick function which works fine. But the submit button of the below form doesn't show hover effect.
<!-- Update details form here -->
<div class="UpdateForm-section">
<form action="/add_address" method="post">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button"/>
</form>
</div>
And my css file is:
#update_submit {
width: auto;
background-color: #4CAF50;
color: white;
padding: 6px 10px;
margin: 4px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#update_submit : hover {
background-color: #ab1313;
}
I don't why my hover effect isn't visible. Am I doing anything wrong? Can anyone help me out?
You are adding space in #update_submit : hover remove spaces and write like this
#update_submit:hover
The colon symbol must be right next to both
#update_submit:hover {
background-color: #ab1313;
}
I'm working with AngularJS to set image buttons disabled/enabled.
My css selector to show them transparent isn't working.
I've started with a try it that selects a disable on an input element and there it does indeed apply the css, but not in case of my div elements.
I've added my div elements that don't work, resulting in the following code:
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
</body>
</html>
The disabled is getting added/removed for my AngularJS html elements. So how do I get the css to apply to a div with disabled added to it?
Note: I know it's possible to duplicate the elements, use ng-if to show/hide them and apply the transparency to it with a class, but that's very ugly.
:disabled pseudo selector will work only for input elements. For div, use div[disabled] to apply css
Use
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Demo
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
Select all disabled input elements (such as input, textarea, select, option, radio, checkbox, button) :
*:disabled{
//enter code here
}
Select all other disabled elements (such as div, section, p, etc):
*[disabled]{
//enter code here
}
Use the attribute selector [attribute='value'], which will work on all types of elements, compared to the pseudo-class :disabled, which only works on form elements
And in your case, where the attribute disabled doesn't have a value, you can omit it [disabled]
Note, when not using the value part in the selector, it will target elements both with and without, but as you can see the with last CSS rule, where the value part is used, it won't.
Stack snippet (here I used it on all, but you can of course keep :disabled for the input's)
input:not([disabled]) {
background: #ffff00;
}
input[disabled] {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
div[disabled='disabled'] {
color: red;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled>
should be transparent, but doesn't have red colored text
</div>
<div disabled='disabled'>
this will both be transparent and have red colored text
</div>
For a div element you should use div[disabled="disabled"] or div[disabled]
its not an input element where you can apply :disabled
You can use div[disabled="disabled"] to select disabled div.
See Below Example :
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<input disabled/>should be transparent
And aslo See this :
I would try:
*:disabled, *[disabled]{ /* ... */}
Example
*:disabled,
*[disabled] {
background: #000;
}
<input type="text" value="foo" disabled />
<input type="text" value="bar" />
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;
}