I'm not sure if all browsers do this but if I provide a for attribute on a label that corresponds to an input's id, this makes hovering over the label trigger the input's hover styles which is undesirable in my case. Is there any way to stop this behavior while still having a form accessible to screen readers?
.field label {
display: block;
margin: 0 0 0.5em 0;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
You can use pointer-events:none; to disable hover effect for any element.
.field label {
display: block;
margin: 0 0 0.5em 0;
pointer-events:none;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
Related
I have a searchbar, which is initially hidden until the user "hovers" over the div "searchbar". The issue I had was if the user did not stay hovered over the searchbar, it would then close and be hidden again. I wanted to change this to :active, meaning the user has to click to show and hide ... however, when changing the CSS to :active, the searchbar opens and instantly closes on itself. Also if I press once and hold down the mouse, it stays open...
Any suggestions where I am going wrong?
https://codepen.io/richag_ff/pen/bGayzeP
<div class="searchbar">
#Html.TextBox("SearchText", ViewBag.SearchText as String, new { #class = "search_input", placeholder = "Search by part or reference" })
<i class="fa fa-search search_icon_i"></i>
</div>
.searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
border-radius: 30px;
padding: 10px;
display: flex;
}
.search_input{
color: #858585;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover > .search_input{
padding: 0 10px;
width: 215px;
caret-color:#000;
transition: width 0.4s linear;
}
.searchbar:hover > .search_icon{
background: white;
color: #000;
}
.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:#858585;
text-decoration:none;
}
Update
OP also needs the input to stay in the "open" state after it has been clicked and returned back to the "closed" state when clicked again. There were changes to the markup:
Add a hidden checkbox
.searchbar is a <label>
.search-icon is a <b> because an interactive tag like <a> will usually result in unexpected behavior when it is in another interactive tag (like <label>).
The toggling feature is possible by leveraging the checkbox/radio button association with <label>:
Figure I
// checkbox is display: none
<input id='switch' type='checkbox'>
// ⇳ id and for must match
<label for='switch' class='searchbar'>
<input id='search' type='search'><b
...
</label>
when a chk/rad input is associated to a <label> -- whenever one is clicked by the user, the other is also clicked remotely. In oder to enable an association, the chk/rad must have an id and the <label> must have a [for] attribute with the chk/rad id (see figure I).
When the <label> is clicked so is the checkbox which in turn changes it's state to :checked. Once checked, it can change all tags that proceed it by the use of adjacent sibling combinator, general sibling combinators, and descendant combinators. Unfortunately, it's not perfect -- because the <label> is not clickable where the input#search resides. Only the areas to the left and right of #search is clickable. I made some outlines to popup whenever the <label> is clicked to indicate to the user that it's in a "locked" state.
:active state only happens when the user keeps the mouse button down. Use :focus on the input. The user clicks the input once and it's in the full length state until the user clicks elsewhere. The .search-icon can be controlled as well be using the adjacent sibling combinator:
Figure II
#search:focus + .search-icon {...
/* If input is focused by user then if the next tag has class
.search-icon, apply the styles on .search-icon */
html {
font: 2ch/1.25 'Segoe UI'
}
.searchbar {
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
padding: 0;
line-height: 40px;
border: 4px groove lightgrey;
border-radius: 5px;
cursor: pointer;
}
#search {
display: inline-block;
font: inherit;
width: 0;
border: 0;
outline: 0;
background: none;
caret-color: transparent;
height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover #search,
#search:focus,
#switch:checked+.searchbar #search {
width: 75%;
margin: 0 12px;
padding: 2px 4px;
border: 3px inset rgba(129, 129, 129, 0.3);
border-radius: 5px;
caret-color: #000;
}
#switch:checked+.searchbar #search {
outline: 3px navy solid;
}
#switch:checked+.searchbar {
background: #ddd;
}
.search-icon {
display: flex;
justify-content: center;
align-items: center;
margin-left: -5%;
color: #858585;
text-decoration: none;
cursor: pointer;
}
.searchbar:hover .search-icon,
#search:focus+.search-icon,
#switch:checked+.searchbar .search-icon {
margin-left: 0;
padding: 5px;
border: 2px groove grey;
border-radius: 50%;
transition: border 0.3s linear;
}
#switch:checked+.searchbar .search-icon {
outline: 3px navy solid;
color: navy;
}
.fa-lg {
display: inline-block;
padding: 10px 2.5px;
}
#switch {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<input id='switch' type='checkbox'>
<label for='switch' class="searchbar">
<input id='search' name='search' type='search'>
<b class="search-icon"><i class="fa fa-search fa-lg"></i></b>
</label>
You need to use :focus for this. But to get focus to work on a div you need to add tabindex="-1" to the div.
Because focus only works for 1 element. You can't focus on the input. Therefor we have to add a jQuery solution to fix it.
See snippet below! ✌️
$('#TmInM').on('focus', function () {
$('#TmInM').addClass('focus');
$('#search').focus();
}).on('blur', function (e) {
$('#TmInM').removeClass('focus');
$('#search').blur();
});
$('#search').on('focus', function () {
$('#TmInM').addClass('focus');
$('#search').focus();
}).on('blur', function (e) {
$('#TmInM').removeClass('focus');
$('#search').blur();
});
#TmInM {
width:40vw;
height:3.4vh;
background: #FFF;
display: inline-block;
margin-left:10vw;
margin-top:0.9vh;
color:#777;
border:2px solid transparent;
outline:none;
border-radius:4px;
-webkit-box-shadow:0px 0px 1px 1px #BBB;
-moz-box-shadow:0px 0px 1px 1px #BBB;
box-shadow:0px 0px 1px 1px #BBB;
}
#TmInM.focus {
border:2px solid #00b646;
outline:none;
}
#TmInM img {
float: left;
margin-top:0.4vh;
margin-left:0.4vw;
opacity: 0.2;
}
#TmInM input {
width:30vw;
height:1.8vh;
padding:0.2vw;
margin-top:0.2vh;
margin-left:0.2vw;
font-size:0.8vw;
border:0;
}
#TmInM input::placeholder {
color:#CCC;
font-style:italic;
}
#TmInM input:focus {
border:2px solid transparent;
outline:none;
-webkit-box-shadow:0px 0px 1px 1px #FFF;
-moz-box-shadow:0px 0px 1px 1px #FFF;
box-shadow:0px 0px 1px 1px #FFF;
}
#TmInM input:focus::placeholder {
color:#999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TmInM" tabindex="-1">
<img src="<?php echo $baseURL; ?>images/search.png" alt="" /><input type="text" name="search" id="search" class="inputmain" placeholder="Send out a leprechaun to go search what u are looking for..." value="" />
</div>
Is there any way with CSS for changing color of legend text when input gets the focus, similar to fieldset working?
Each of the fieldset changes color when their particular input gets the focus. I am trying similarly for legend.
fieldset {
border-radius: 0.6vh;
border: 1vh solid black;
padding: 1.68vh;
}
fieldset:focus-within {
border-color: blue;
}
/* legend not changing color when focused on input */
legend:focus-within {
color: blue;
}
legend {
padding: 0 1.2vh;
color: black;
}
input {
border: none;
padding: 0.29vh;
}
input::placeholder {
color: black;
}
input:focus {
outline: none;
}
<fieldset>
<legend>Name</legend>
<input type="text" placeholder="Your name">
</fieldset>
You need to get the event from the input focus and select with > the legend text and change color.
fieldset {
border-radius: 0.6vh;
border: 1vh solid black;
padding: 1.68vh;
}
fieldset:focus-within {
border-color: blue;
}
/* legend not changing color when focused on input */
fieldset:focus-within > legend {
color: blue;
}
legend {
padding: 0 1.2vh;
color: black;
}
input {
border: none;
padding: 0.29vh;
}
input::placeholder {
color: black;
}
input:focus {
outline: none;
}
<fieldset>
<legend>Name</legend>
<input type="text" placeholder="Your name">
</fieldset>
I have a date input field, and a font awesome icon on top of it. The look is correct, but I can't click on the input when the mouse in on top of the icon. I've tried to fix this using z-index, but it's not working.
Here's what it looks like:
HTML
<div class="form-group inline-block Criteria__datePickerDiv">
<input type="text" name="dob" id="datepicker" placeholder="Birth Date" class="Criteria__datePicker" value=" {{ old($user->seekerProfile->dob->format('Y-m-d')) }}">
</div>
<span class="Criteria__calendar">
<i class="fa fa-calendar"></i>
</span>
CSS
.Criteria__datePicker {
border: none;
border-bottom: 3px solid $gray-light;
font-size: 20px;
text-shadow: 0 0 0 $gray-light;
color: transparent;
font-weight: 600;
width: 150px;
padding-right: 5px;
margin-left: 15px;
&:focus {
outline: none
}
}
.Criteria__datePicker:hover {
cursor: pointer;
}
.Criteria__datePicker:focus {
outline: none;
}
.Criteria__datePickerDiv {
z-index: 1;
}
.Criteria__calendar {
position: relative;
left: -15px;
font-size: 22px;
color: $brand_green;
z-index: 0;
}
Using the default Bootstrap styles, you can get close to what you're doing with an input group (example):
HTML:
<div class="buffer">
<div class="input-group">
<input class="form-control" aria-describedby="basic-addon2" type="text">
<span class="input-group-addon" id="basic-addon2">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
CSS:
.buffer
{
margin: 1em;
width: 200px;
}
.buffer .input-group input
{
border-right: none;
}
.buffer .input-group .input-group-addon
{
background: #fff;
border-left: none;
}
If you're going for a borderless style, you can get even closer:
.buffer
{
margin: 1em;
width: 200px;
}
.buffer .input-group
{
border: none;
}
.buffer .input-group input
{
border-right: none;
border: none;
border-bottom: solid 1px #d5d5d5;
box-shadow: none;
border-radius: 0;
}
.buffer .input-group .input-group-addon
{
background: #fff;
border: none;
border-bottom: solid 1px #d5d5d5;
border-radius: 0;
}
.buffer is simply a container/class I added to contain the input group - you can safely remove that.
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>
I am trying to achieve following feature:
It's an input box, has 4 digits, once clicked, user can input 4 digits.
It's part of a mobile app.
Currently what I have achieved is : example, note that for some reason,
outline: none; works fine in my app but not work in this jsFiddle example.
My question is how to draw the 3 separation bar and also display those digits
just fit their position within it?
Is it achievable using css?
below are code:
<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">
<div data-role="fieldcontain">
<span>
<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">
</span>
</div>
<input type="submit" class="submitHidden">
</form>
css:
.ui-corner-all-input {
-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
margin-top: 24px;
}
.ui-shadow-around {
-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
border: 1px #b6b6b6 solid;
}
*:not(input):not(textarea) {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
FORM[data-enhance="false"] INPUT, textarea {
outline: none;
}
FORM[data-enhance="false"] SPAN {
overflow: hidden;
display: block;
padding: 0 10px 0 0px;
text-align: left;
}
.submitHidden {
visiblity: hidden;
position: absolute;
opacity: 0;
}
Here is my take on the problem.
It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.
.input-widget {
vertical-align: top;
margin-left: 1rem;
font-size: 2rem;
display: inline-block;
position: relative;
}
.input-widget .input {
width: 8rem;
font-size: inherit;
font-family: inherit;
letter-spacing: 5px;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-widget .digit-background {
position: absolute;
top: 1px;
left: 0;
z-index: -1;
}
.input-widget .digit-background .digit {
display: inline-block;
float: left;
}
.input-widget .digit-background .digit::before {
content: '0';
color: lightgray;
background-color: currentColor;
display: inline-block;
padding: 1px;
margin: -1px 4px 0 -1px;
}
<div class="input-widget">
<input type="number" max="9999" class="input" value="01234">
<div class="digit-background">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>
And a SCSS version is here: https://jsfiddle.net/cburgmer/0xgtdyLj/1/
You could do it like this:
HTML:
<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
CSS:
.clock {
color:darkgray;
border-style:none;
width:40px;
height:60px;
font-size:60px;
}
td{
border:2px solid darkgray
}
table {
border-collapse:collapse;
}
JavaScript:
function next(next) {
document.getElementById(next).focus();
}
Link: http://jsbin.com/uhaHunuq/1/edit?html,output
Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.