In the example below, if you keyboard navigate to the checkbox, I get the custom focus state I'm looking for. However, I don't want the focus to show on click. I only want to show the focus state when it's keyboard navigated to.
How do I remove the focus state if clicked on?
input[type=checkbox]:focus, input[type=checkbox]:focus-visible {
outline: none;
}
label:focus-within {
outline: 2px solid #005fec;
outline-offset: 4px;
z-index: 10;
}
<label for="check1">
<input type="checkbox" name="check1" id="check1">
<span>Check Here</span>
</label>
Try this!
input[type=checkbox], input[type=checkbox] {
outline: none;
}
<label for="check1">
<input type="checkbox" name="check1" id="check1">
<span>Check Here</span>
</label>
To avoid showing the outline on focus you have to use: outline: none; (https://developer.mozilla.org/de/docs/Web/CSS/outline). In your case you have to add outline: none; only to the class label:focus-within.
label:focus-within {
outline: 2px solid #005fec;
outline-offset: 4px;
z-index: 10;
outline: none;
}
<label for="check1">
<input type="checkbox" name="check1" id="check1">
<span>Check Here</span>
</label>
I changed it to the css solution, but I need to modify the html structure, take the input out of the lable, and modify the css like this
input[type=checkbox]:focus, input[type=checkbox]:focus-visible {
outline: none;
}
input[type=checkbox]:focus, input[type=checkbox]:focus-visible {
outline: none;
}
/* I just added for here for debugging convenience, and now I have removed it
label[for='check2']
*/
label{
padding-left: 25px;
margin-left: -25px;
}
input[type=checkbox]:focus-visible + label{
outline: 2px solid #005fec;
outline-offset: 4px;
z-index: 10;
}
<input type="checkbox" name="check2" id="check2">
<label for="check2">
<span>Check Here2</span>
</label>
Related
I'm making a form for a website and want the border of the fields to change color when the field is filled with text. I was thinking I could simply do it with adding an :active state but that doesn't seem to work...
Here is my code: https://jsfiddle.net/3uczn2bw/1/
HTML
<form>
<label for="fname">First name:</label><br>
<input type="text" placeholder="First name" id="fname" name="fname">
<label for="lname">Last name:</label><br>
<input type="text" placeholder="Last name" id="lname" name="lname">
</form>
CSS
input {
border: none;
outline: none!important;
padding: 10px 20px;
width: 300px;
}
input[type=text] {
color: #1a1a1a;
border-bottom: 4px solid #1a1a1a;
font-size: 24px;
font-weight: 900;
}
input[type=text]:focus {
border-bottom: 4px solid #178926;
}
To achieve this you need to add some scripts. I have given the script below by using this you will achieve your goal.
In script add below code:
document.querySelectorAll('input').forEach((input) => {
input.addEventListener('blur', function() {
this.classList.toggle('green', this.value.length > 0);
});
});
In CSS add below code:
.green {
border: 2px solid blue;
}
by using this CSS property you can manipulate the border properties.
This Code is useful for all input elements.
I want to keep the background color of the input field as 'green', the problem is that when I click on it to write something, the color changes to default white again, here is my CSS code:
input{
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid $grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: $green;
}
the HTML React part:
<form className="form">
<input type="text" name="name" className="form__name" placeholder="Name*"/>
<input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>
You could use input:focus to keep the background green while typing. Make sure you do not have other css which is overriding this css.
Demo:
input {
width: 100%;
color: white;
border: none;
border-bottom: 1px solid grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: green;
}
input:focus {
background: green;
}
<form class="form">
<input type="text" name="name" class="form__name" placeholder="Name*" />
<input type="email" name="email" class="form__email" placeholder="Email*" />
</form>
I think you have to use the :focus Property.
So like that:
input:focus {
background: #161616;
}
Use input:focus below input to write your css rules for the focus scenario.
I'm creating a dropdown menu box and arrow. It looks good except one thing. I used :focus so when user is on select the box, it will turn to green. Yes, box is turning to green but when I do the same thing for arrow icon, it is not changing. Can someone help me with this?
All help will be appreciated.
I have searched some solution on the internet but could not fix the problem.
input[type=text],
input[type=tel],
input[type=email] {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
}
/* user input and dropdown turning to green color when active */
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #42AC82;
}
/* dropdown box styling */
select {
width: 100%;
padding: 5px 5px;
height: 40px;
box-sizing: border-box;
border: 2px solid #A9A9A9;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select-container {
position: relative;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.select-arrow {
color: #A9A9A9;
right: 0px;
top: 7px;
width: 30px;
position: absolute;
display: block;
z-index: 10;
margin: 0 0 0 0;
pointer-events: none;
}
select:required:invalid {
color: gray;
}
select[value=""][disabled] {
display: none;
}
<div class='grid'>
<div class='col col-1-of-4'>Is desicion maker?<br>
<div class="select-container">
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
<select name="options" required>
<option value="" disabled selected>Select an option
</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
</div>
</div>
</div
The reason why you're not seeing the arrow color change is that the arrow icon is not a children or next sibling of select element and there's no CSS selector for previous/ parent element. The way I see it you have two options there:
1) Move you arrow icon after select:
<select name="options" required>
<option value="" disabled selected>Select an
option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-
size: 1.5em;"></span>
Which should you allow to use + (next sibling) selector
select:focus + .select arrow { color: #42AC82 }
2) Use JS to detect select element focus and toggle class select-container element what would allow you to style all child elements as you need
Try add some of your css like this part:
input[type=text]:focus ~ span ,
input[type=tel]:focus ~ span ,
input[type=email]:focus ~ span ,
select:focus ~ span ,
textarea:focus ~ span {
color: red;
}
And transfer your span with icon after select tag like this:
<select name="options" required>
<option value="" disabled selected>Select an option</option>
<option value="1">yes</option>
<option value="2">no</option>
</select>
<span class="select-arrow fa fa-caret-down" style="font-size: 1.5em;">
</span>
I have floating placeholder in the input field.
Placeholder will appear in center when we input value has not been provided. as shown in the below screenshot (Email and password is placeholder).
Now when you provide the value to email it does look like below. Observer the Email and password has been pulled up when value has been provided
The problem occurs when browser starts auto-filling/autocomplete this value from the saved credentials on page load like username, email, password so on. see the screen shot below:
css
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
html,
body {
height: 100%;
}
.form-signin {
width: 100%;
max-width: 600px;
padding: 15px;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}
HTML
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please Type new password</h1>
<div class="form-label-group">
<input type="text" id="inputEmail" [(ngModel)]="email" name="email" class="form-control" placeholder="Email" required=""
autofocus="">
<label for="inputEmail">Email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" [(ngModel)]="password" name="password" class="form-control" placeholder="Password"
required="">
<label for="inputPassword">Password</label>
</div>
<div class="row">
<div class="col-sm-6">
<button class="btn btn-lg btn-primary btn-block" (click)="onSubmit()" type="button">Change password</button>
</div>
</div>
</form>
I had already tried to autofocus on the email field but that did not worked.
I also tried to click the element from the code after the page load but with no luck. Please help me how do I fix this.
It works for me
.form-label-group input:-webkit-autofill ~ label {
/* CSS property */
}
You can try it
I had the same problem. In my form, I'm using the following selectors to move my label text out of the way, on any of these 3 conditions:
:focus (so it's not in the way of the cursor when focused)
:not(:placeholder-shown) (indicating "the input is not empty")
:-webkit-autofill (because 2 wasn't triggering on page refresh / autofill)
The SCSS combination is:
input {
&:focus, &:not(:placeholder-shown), &:-webkit-autofill {
&+label { /* Move your label */ }
}
}
(Note that you also need a placeholder=" " on your input.)
Here's a live example: https://codepen.io/jeffward/pen/ZdBxXd
I have a checkbox that I am styling by hiding the input and targetting a span nested in a label. See http://jsfiddle.net/rz6np/
HTML:
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<label for="confirm"><span>+</span>Confirm</label>
CSS:
input[type="checkbox"] {
display: none;
}
form input[type="checkbox"] + label span {
display: inline-block;
width: 16px;
height: 16px;
margin: 1px 10px 5px 0;
vertical-align: middle;
cursor: pointer;
border: 1px solid grey;
color: #fff;
font-size: 15px;
padding: 2px 2px;
}
input[type="checkbox"]:checked + label span {
color: #000;
}
As the input is hidden it means the html5 required pop-up doesn't display. Is there a way to force it to display?
Assuming the design looks like this or similar to this, don't use display: none. The styled checkbox is large enough to cover it, so just position it over the checkbox with position relative or absolute, and appropriate z-index.
If it won't cover it completely, you could still get away with using visibility:hidden on the checkbox. I still see the popup in Firefox even though the field is invisible, but you'll need to check other browsers and how they behave.
input and span should be inside the label:
<label for="confirm">
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<span>+</span>
Confirm
</label>
Then on input:
label {
position: relative;
}
label > input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}