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>
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>
I tried to use "outline: 0", but this doesn't change a thing.
#input_field {
outline: 0;
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}
<div id="input_field">
<input type="text" name="q" size="50">
</div>
I still need outline for other inputs.
UPDATED:
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}
Since i don't want others to be updated, here is a .css regarding the others. The outline should only apply on the #input_field.
Thank you in advance!
You can do something like this:
fiddle to playaround.
#input_field {
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}
.OutlineNotNeeded {
border: none;
}
.OutlineNotNeeded:focus {
outline: 0;
}
<div id="input_field">
<input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>
You need to remove the outline on the input on focus.
#input_field > input:focus {
outline:none;
}
To remove the border too (which can trick you because it looks the same as an outline and will always stay there even on focus unless you remove it) you can add:
#input_field > input {
border:none;
}
If your trying to see a border only when focusing you can go:
#input_field > input {
border:none;
}
#input_field > input:focus {
border:1px solid #000;
}
you just need to place a different class or id for the input tag for the outline to be focus/not focus. focus state is an action taken when the input is click.
input.showoutline:focus{
outline: color type size;
}
input.hideoutline:focus{
outline: 0;
}
<input class="showoutline"/>
<input class="hideoutline"/>
I have a simple date input
<input type="date" id="sign-up-dob" class="sign-inputs" max="2999-12-31"></input>
It looks like this:
How would i get rid of the arrows and stuff to the right that open the date picker. I just want it so you can type the date with validation, thanks.
Just use the pattern attribute on a text input:
input:invalid {
color: red;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
<label>Input Date (YYYY-MM-DD):
<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
</label>
<input type="date" />
http://jsfiddle.net/trixta/cc7Rt/ For Reference
webshim.setOptions('forms-ext', {
replaceUI: 'auto',
types: 'date',
date: {
startView: 2,
inlinePicker: true,
classes: 'hide-inputbtns'
}
});
webshim.setOptions('forms', {
lazyCustomMessages: true
});
//start polyfilling
webshim.polyfill('forms forms-ext');
//only last example using format display
$(function () {
$('.format-date').each(function () {
var $display = $('.date-display', this);
$(this).on('change', function (e) {
//webshim.format will automatically format date to according to webshim.activeLang or the browsers locale
var localizedDate = webshim.format.date($.prop(e.target, 'value'));
$display.html(localizedDate);
});
});
});
.hide-replaced.ws-inputreplace {
display: none !important;
}
.input-picker .picker-list td > button.othermonth {
color: #888888;
background: #fff;
}
.ws-inline-picker.ws-size-2, .ws-inline-picker.ws-size-4 {
width: 49.6154em;
}
.ws-size-4 .ws-index-0, .ws-size-4 .ws-index-1 {
border-bottom: 0.07692em solid #eee;
padding-bottom: 1em;
margin-bottom: 0.5em;
}
.picker-list.ws-index-2, .picker-list.ws-index-3 {
margin-top: 3.5em;
}
div.ws-invalid input {
border-color: #c88;
}
.ws-invalid label {
color: #933;
}
div.ws-success input {
border-color: #8c8;
}
form {
margin: 10px auto;
width: 700px;
min-width: 49.6154em;
border: 1px solid #000;
padding: 10px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
label {
display: block;
margin: 3px 0;
}
.form-row input {
width: 220px;
padding: 3px 1px;
border: 1px solid #ccc;
box-shadow: none;
}
.form-row input[type="checkbox"] {
width: 15px;
}
.date-display {
display: inline-block;
min-width: 200px;
padding: 5px;
border: 1px solid #ccc;
min-height: 1em;
}
.show-inputbtns .input-buttons {
display: inline-block;
}
<form action="#" class="ws-validate">
<h2>1 Calendars without visible input</h2>
<div class="form-row">
<input type="date" class="hide-replaced" />
</div>
<div class="form-row">
<input type="submit" />
</div>
</form>
<hr />
I have a label and drop down list behind it
it goes something like this :
<div class="=row dropdown" id="conTypeSelect" >
<label id="connectTypeLabel" class="label">Connector Type</label>
<select id="connecType" name="connecType" class="dropdownList" >
<option>type1</option>
<option>type2</option>
</select>
</div>
I want it so when clicking on the element to make the label change color to blue.
I know how to do it through a script by trigger off event on select and add css to the label to set it blue.
However I am wondering if there is a way to do it simply through css. Using script seem to make my code alot more messy for things like this.
So I thought of adding css to the parent and make it
.dropdown:focus {
color: #1A98C6;
}
.label:focus {
color: #1A98C6;
}
.dropdownList:focus {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}
however applying this to parent div doesn't seem to apply to child.
is there a way to make it so when I focus the parent the child would get focused too with css?
I have attempted to use this as the css but it doesn't seem to work:
.dropdown:focus .label {
color: #1A98C6;
}
.dropdown:focus .dropdownList {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}
You can achieve this by a + selector and putting the label after the select, so that you can do something like
.dropdown select:focus + label to select the label after the focused select box.
And use float:left on the label and a bit of right margin to pull the lable to the left of the select box.
.dropdown>select+label {
float: left;
margin-right: 10px;
}
.dropdown>select:focus+label {
color: #1A98C6;
float: left;
margin-right: 10px;
}
.dropdown>select:focus {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
background: blue;
color: white;
}
<div class="=row dropdown" id="conTypeSelect">
<select id="connecType" name="connecType" class="dropdownList">
<option>type1</option>
<option>type2</option>
</select>
<label id="connectTypeLabel" class="label">Connector Type</label>
</div>
NOTE: I just added a background and color on select too just to show it effects the select too when focused.
This is the only way I can think of using CSS only to trigger by clicking the <input type="checkbox">.
body {
font-family: Arial;
font-size: 13px;
}
input[type=checkbox]{
display: none;
}
ul{
display: none;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0;
width: 100px;
}
ul li {
border-bottom: 1px solid #eee;
cursor: pointer;
line-height: 30px;
list-style: none;
text-align: center;
}
ul li:hover {
background-color: #333;
color: #fff;
}
input[type=checkbox]:checked ~ ul {
display: block
}
<div class="dropdown" id="conTypeSelect">
<input type="checkbox" id="checkbox_toggle">
<label for="checkbox_toggle">Click to choose Connector Type</label>
<ul>
<li>type1</li>
<li>type2</li>
</ul>
</div>
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>