This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
CSS "and" and "or"
(9 answers)
Closed 2 years ago.
I have two forms, one that contains a form field for entering a username and a second form on another page where a user enters an email address:
<!-- user.html -->
<form action="/account/login/" method="post">
<div class="form-group mt-3">
<input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
</div>
<p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>
<!-- email.html -->
<form action="." method="post">
<div class="form-group">
<input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
</div>
<input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>
I'm trying to style both input controls using multiple attribute selectors like this but it's not working. The styles aren't being applied.
// styles.scss
form input[type=text][type=email] {
background-color: #f0f0f0;
}
But if I separate the types into two separate rules like this, the styles do get applied properly.
form input[type=text] {
background-color: #f0f0f0;
}
form input[type=email] {
background-color: #f0f0f0;
}
The CSS documentation says this should work. What am I doing wrong?
As per the documentation this matches when type=email AND type=text which can't be true.
Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
You would need to include both versions;
form input[type=text],
form input[type=email] {
background-color: #f0f0f0;
}
Add a comma after input with the type of text.
Related
I am using bootstrap 5 to create a form with floating input.
Here is an input I use:
<div class="form-floating mx-auto mb-3 w-25">
<input type="text" class="form-control" id="username_field" placeholder=" " />
<label for="username_field" class="form-label">Username</label>
</div>
This code generate a floating input like so:
floating input
I would like to change the color of the label when the input is selected (using only css, if possible).
You could try something like the following to affect all inputs or modify the following to use id's/classes if you only want it specifically for this one input:
input:focus + label {
color: orange;
}
When it will be focus on your input element, at the time of focus use + selector to select the label next to it and give whatever color to it you want.
Read it here about selectors.
if you need something else, pls feel free to comment
.form-control:focus + .form-label {
color: red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="form-floating mx-auto mb-3 mt-3 w-75">
<input type="text" class="form-control" id="username_field" placeholder=" " />
<label for="username_field" class="form-label">Username</label>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I have HTML structure that looks like -
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">TEXT A
</label>
</div>
I want that when the input type is checked (checked being the inbuilt class that is added automatically on checking the radio button ), I apply a style before label.
In unchecked case -
label::before{
/* something */
}
In checked case, I am writing something like this,
input[type='radio']:checked label::before{
/* something */
}
I want to apply label::before where input[type='radio']:checked but I don't know how to merge these two conditions in CSS. I just need help with the syntax.
Can anyone please tell me ?
Thanks !!
Solution
Use for attribute on label instead of nesting input inside of the label in order to use the the adjacent sibling combinator.
Example
HTML
<div class="form-check-inline">
<input type="radio" class="form-check-input" name="optradio">
<label class="form-check-label" for=“optradio”>
TEXT A
</label>
</div>
CSS
input[type='radio']:checked + label::before{
/* something */
}
References
Adjacent sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
This question already has answers here:
Using CSS :before and :after pseudo-elements with inline CSS?
(10 answers)
Closed 3 years ago.
<style>
::placeholder {
color: red;
}
</style>
<input id="date" name="date" placeholder="Please select release date" type="text"/>
this is my css. Is there any way to define this inline ? I mean with style = "" .
With CSS variables you can do like below but you need at least to define the style that you can change later:
::placeholder {
color: var(--c, red); /* The default is red */
}
<input id="date" name="date" placeholder="select date" type="text" >
<input id="date" name="date" placeholder="select date" type="text" style="--c:blue" >
This question already has answers here:
Style disabled button with CSS
(11 answers)
Closed 3 years ago.
I have form that I would like the save button to be disabled with different color. It is disabled since I cannot click on it, but I would like the color to be changed as well until all fields are completed.
Currently the color is blue, when it is disabled and enabled. But I would like it to change based on condition.
<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
<button md-button class="saves" type="submit" (click)="onSave()"
[disabled]="!editCardForm.valid">Save</button>
</div>
.saves {
height: 2.375rem;
width: 5.375rem;
border-radius: 1.1563rem;
color: white;
background-color: #00B8E6;
margin-left: 0.2rem;
}
You can do this with form validation if your fields are inside a form for example. Here is a quick demo of how that can be achieved.
form:valid .button {
background : green;
}
<form>
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/><br/>
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/><br/>
<input class="button" type="submit" value="Login"/><br/>
</form>
The button will only get green, if the inputs have text, as required.
I had to put the button.
button.saves:disabled {
background-color: green;
}
I was wondering if it is possible to specify elements in CSS where an attribute is equal to one of two values, something like this:
input[type=text][type=password]
However this selector does not seem to work (I assume because specifying the same attribute twice is not valid), does anyone know how to do this?
You may simply list them as individual selectors:
input[type="username"],
input[type="password"] {
color: blue;
}
<form>
Username: <input type="username" name="Username" value="Username" />
Password: <input type="password" name="Password" value="Password" />
<input type="submit" value="Submit" />
</form>
One option nowadays is :is, a little cleaner and saves characters as the list of selectors increases:
<style>
input:is([type=text], [type=password]) { background-color: red }
</style>
<input type="text"> red
<input type="password"> red
<input type="email"> white
MDN has some useful examples that show where a major reduction in the number of selectors can be had using :is https://developer.mozilla.org/en-US/docs/Web/CSS/:is