project is here -> https://play.tailwindcss.com/udQSLuVwHa
When i click inside the InputField (do not click directly on the Username label), the Label correctly shrinks.
And if i click out of the inputField (make it lose focus), the Label gets big again.
Now, if i type some text into the InputField, and the make it lose focus, the Username label should not shrink, but stay on top.
I have commented out the CSS that should work. Its something wrong with my CSS right? and not tailwinds?
Try to select label when it's sibling input is not showing placeholder by input:not(:placeholder-shown) + label, here is your styles with new selector:
.outline:focus-within label,
input:not(:placeholder-shown) + label {
background-color: white;
transform: scale(0.75) translateY(-1rem);
z-index: 0;
margin-left: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0px;
padding-bottom: 0px;
}
Saeed's answer is a great CSS solution.
If you want to solve this in JavaScript you could do the following:
(note styling will look different when you run code snippet as tailwind isn't present)
inputUsername = document.getElementById('inputUsername');
labelUsername = document.getElementById('labelUsername');
inputUsername.onfocus = () => {
labelUsername.classList.add('outline');
}
inputUsername.onblur = () => {
if (inputUsername.value.length == 0){
labelUsername.classList.remove('outline');
}
}
.outline {
background-color: white;
transform: scale(0.75) translateY(-1rem);
z-index: 0;
margin-left: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0px;
padding-bottom: 0px;
}
<div class="outline relative border-2 focus-within:border-blue-500">
<input id="inputUsername" class="bg-red-700 block p-4 w-full text-lg appearance-none bg-transparent" placeholder=" " type="text" />
<label id="labelUsername" for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>
Related
I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible.
I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible?
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
display: none;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__input:focus,
.tabs__input:hover {
color: red;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" tabindex="0" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" tabindex="0" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
Accepted answer is not an accessible solution.
I have made some corrections and some observations here. Do not use the accepted answer in production if you stumble across this question in the future. It is an awful experience with a keyboard.
The answer below fixes some of the CSS issues to make it more accessible.
However I would recommend you reconsider the no JavaScript requirement.
I can understand having a good fall-back (which the example I give below with the fixes is) but there is no way you can make a fully accessible set of CSS only tabs.
Firstly you should use WAI-ARIA to complement your HTML to make things even more clear for screen readers. See the tabs examples on W3C to see what WAI-ARIA roles you should be using. This is NOT possible without JavaScript as states need to change (aria-hidden for example should change).
Secondly, you should be able to use certain shortcut keys. Press the home key for example in order to return to the first tab, something you can only do with a little JS help.
With that being said here are a few things I fixed with the accepted answer to at least give you a good starting point as your 'no JavaScript fallback'.
Problem 1 - tabindex on the label.
By adding this you are creating a focusable element that cannot be activated via keyboard (you cannot press space or Enter on the label to change selection, unless you use JavaScript).
In order to fix this I simply removed the tabindex from the labels.
Problem 2 - no focus indicators when navigating via keyboard.
In the example the tabs only work when you are focused on the radio buttons (which are hidden). However at this point there is no focus indicator as the styling is applying styling to the checkbox when it is focused and not to its label.
In order to fix this I adjusted the CSS with the following
/*make it so when the checkbox is focused we add a focus indicator to the label.*/
.tabs__input:focus + label {
outline: 2px solid #333;
}
Problem 3 - using the same state for :hover and :focus states.
This is another bad practice that needs to go away, always have a different way of showing hover and focus states. Some screen reader and screen magnifier users will use their mouse to check they have the correct item focused and orientate themselves on a page. Without a separate hover state it is difficult to check you are hovered over a focused item.
/*use a different colour background on hover, you should not use the same styling for hover and focus states*/
.tabs__label:hover{
background-color: #ccc;
}
Example
In the example I have added a hyperlink at the top so you can see where your focus indicator is when using a keyboard.
When your focus indicator is on one of the two tabs you can press the arrow keys to change tab (which is expected behaviour) and the focus indicator will adjust accordingly to make it clear which tab was selected.
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
position: fixed;
top:-100px;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__label:hover{
background-color: #ccc;
}
.tabs__input:focus + label {
outline: 2px solid #333;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
A link so you can see where your focus indicator is
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
It is just radio buttons... Keyboard can be used to navigate through them using tab and space bar to check them.
I'd use :focus to highlight the chosen tab and the tabindex property to make it work as I wanted.
Please provide more dept if you have problem with a SPECIFIC problem related to it, and provide a basic code example here, no linking.
Since hidden inputs cannot be selected through keyboard, make them visible...
.tabs {
background-color: #eee;
min-height: 400px;
}
.tabs__list {
border-bottom: 1px solid black;
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tabs__tab {
padding: 0.5rem;
}
.tabs__content {
display: none;
left: 0;
padding: 0.5rem;
position: absolute;
top: 100%;
}
.tabs__input {
position: fixed;
top:-100px;
}
.tabs__input+label {
cursor: pointer;
}
.tabs__input:focus
.tabs__input:hover {
color: red;
}
.tabs__input:checked+label {
color: red;
}
.tabs__input:checked~.tabs__content {
display: block;
}
<div class="tabs">
<ul class="tabs__list">
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
<label for="tab-0" class="tabs__label" tabindex="0" role="button">Tab 0</label>
<div class="tabs__content">
Tab 0 content
</div>
</li>
<li class="tabs__tab">
<input class="tabs__input" type="radio" id="tab-1" name="tab-group">
<label for="tab-1" class="tabs__label" tabindex="0" role="button">Tab 1</label>
<div class="tabs__content">
Tab 1 content
</div>
</li>
</ul>
</div>
I'm attempting to replicate the experience from the Shopify checkout in my WooCommerce checkout page by animating the labels when the user focuses on a certain input, just like this:
I've tried using input:focus ~ label, but it won't work because the default WooCommerce input is inside a span (.woocommerce-input-wrapper) like this:
<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">Nombre <abbr class="required" title="obligatorio">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
</span>
</p>
<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
position: absolute;
top: 11px;
left: 11px;
padding: 0;
color: #808080;
transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
top: -8px;
font-size: 12px;
font-weight: 500;
}
</style>
Thanks!
I hope you find these codes useful
my css:
label {}
.woocommerce form .form-row label {
position: absolute;
left: 10px;
top: 15px;
}
.woocommerce form .form-row {
position: relative;
}
label.floatlabel {
top: -30px !important;
}
mu jQuery :
jQuery('.woocommerce form .form-row input').click(function(){
var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");
if(jQuery('floatlabel').length ){
jQuery('label.floatlabel').removeClass('floatlabel');
}
jQuery(label).addClass('floatlabel');
})
The major issue with woocommerce checkout inputs is that labels are before inputs. For floating labels to work you need to place the labels after the inputs then it is all easy. (You can use any css method here: https://css-tricks.com/float-labels-css/).
I have tried finding a way to revert these elements in html but without success. I also tried using flexbox in css along with column-reverse but the animation didn't seem to work.
Basically the answer we are searching for is to the question: How to place labels after inputs in woocommerce checkout?
#Morteza Barati's answer could be good but it doesn't work properly. If inputs are autofilled then the label sits on top of them + once label moves up in case field is erased it won't come back down.
As already mentioned: There is no standardized way to change the input-label position on text input.
Off-topic: The design pattern in your screenshot comes from Googles material design (at least that's where it's commonly used and seen today). You can find more about that pattern here: https://material.io/components/text-fields
Solution with JS and CSS
You need some CSS and JS code to implement that design pattern. There are four different states you need to cover:
When a field receives the text-focus: Move the label up.
When a field loses focus and has no content: Move the label down.
When a field loses focus and has content: Leave the label up.
When a field has a value on page load: Move the label up.
Here's a short demo - the important part is the JS code which adds CSS classes to the field container on focus, blur and input.
jQuery('.form-row :input').each(function() {
var $input = jQuery(this);
var $row = $input.closest('.form-row');
// Is the field filled on page load?
if ($input.val()) {
$row.addClass('-filled');
}
// Enter or leave the "focus" state.
$input.on('focus', function() {
$row.addClass('-focus');
});
$input.on('blur', function() {
$row.removeClass('-focus');
});
// When the fields input value changes, add or remove the "-filled" state
$input.on('input', function() {
if ($input.val()) {
$row.addClass('-filled');
} else {
$row.removeClass('-filled');
}
});
})
.form-row {
position: relative;
padding-top: 20px; /* top padding adds space for the label */
margin: 10px 0;
}
.form-row label {
position: absolute;
top: 20px; /* initially, the label is down */
left: 0;
color: #aaa;
transition: all 0.3s;
}
/* Give both the label and input field the same padding/box-size */
.form-row input,
.form-row label {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* When the field is focused or filled, move the label up */
.form-row.-focus label,
.form-row.-filled label {
color: #6200ee;
font-size: 12px;
top: 0;
padding: 0;
line-height: 20px; /* Set the line height to the top-padding */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row">
<label for="field1">
Field 1 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field1">
</span>
</p>
<p class="form-row">
<label for="field2">
FIeld 2 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field2" value="Initial Value">
</span>
</p>
</div>
Pure CSS
TL;DR; this is not possible in WooCommerce out-of-the-box.
Note: A pure CSS solution is also possible when your comes after the field and could look like the below sample.
It works by using the input fields "placeholder" as the initial caption. The CSS selector :not(:placeholder-shown) matches every text field that has a value. The CSS selector :focus handles the input fields focus state.
However, this is just a sample and is not possible in WooCommerce without writing custom cart and checkout templates to produce the correct HTML elements.
.form-row {
position: relative;
padding-top: 20px;
margin: 10px 0;
}
.form-row label {
position: absolute;
color: #6200ee;
font-size: 12px;
top: 0;
left: 0;
padding: 0;
line-height: 20px;
opacity: 0;
transition: all 0.3s;
}
.form-row input {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* Here's the logic: */
.form-row input:focus::placeholder {
opacity: 0;
}
.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
opacity: 1;
}
<p class="form-row">
<input type="text" id="field1" placeholder="My Field">
<label for="field1">
My Field
</label>
</p>
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
everyone, I am working on Reactjs project, I want to add submit button inside the input field, but I am not able to add, can anyone help me to place submit button inside input field, thanks in advance, my demo code, expected and actual outcome is attached
Reactjs code
<div className={styles.subscribeInputContainer}>
{I18n.getComponent(
(formattedValue) =>
<input
id="subscribeInput"
required={true}
value={this.state.value}
className={styles.subscribeInput}
placeholder={formattedValue}
onKeyPress={(e) => this.onKeyPress(e)}
onChange={(e) => this.onEmailChange(e.target.value)}
/>,
'footer.your-email-address',
{},
'Enter Your email address'
)}
<p className={styles.subscribeButton} id="btnId">
<Button variant="primary" className={styles.subscribeIcon} onClick={() => this.onSubscribe()}>Button</Button>
</p>
</div>
CSS code
.inputContainer {
position: relative;
}
.subscribeIcon {
position: absolute;
right: 10px;
}
.subscribeInputContainer {
display: flex;
flex-flow: row;
flex: 1;
font-size: $fontSize-lg;
color: $color-body;
}
Actual outcome
Expected Outcome
First, don't use a p as a wrapper, use a div
When you use position: absolute you take that element out of flow, and as such its parent will not take it into account when sizing itself.
If you remove position: absolute from the .subscribeIcon and add margin-left: auto to the .subscribeButton, your button should be properly right aligned within its parent, the .subscribeInputContainer.
.subscribeInputContainer {
display: flex;
flex-flow: row;
flex: 1;
border: 1px solid gray;
padding: 5px;
}
.subscribeButton {
margin-left: auto;
}
.subscribeIcon {}
<div class='subscribeInputContainer'>
<input id="subscribeInput" required={true} value={this.state.value} className={styles.subscribeInput} placeholder={formattedValue} onKeyPress={(e) />
<div class='subscribeButton' id="btnId">
<Button variant="primary" class='subscribeIcon' onClick={()=> this.onSubscribe()}>Button</Button>
</div>
</div>
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.