I am playing around with this template. When incorporating the functionality into the sort of dashboard I am building, everything works fine except that I get an unwanted empty space of a few px above the tabs, when decreasing the font size. I have created a minimal working example:
HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #003399;
}
.tab {
float: left;
}
.tab label {
background: #eee;
position: relative;
font-size: 16px;
}
.tab [type=radio] {
display: none;
}
https://jsfiddle.net/tqejgae0/
See the extra blue space above the tabs when using Firefox? It looks as expected in Chromium, Chrome, Opera, and Safari.
There are a lot of similar questions on Stackoverflow, most of them solved with
* {
padding: 0;
margin: 0;
}
Neither this, nor any of the other solutions worked for me.
Web Design is certainly not my background, so I am thankful for any help!
Edit:
Here's a screenshot:
Adding display:block to the .tab label selector solved the problem for me.
.tab label {
background: #eee;
position: relative;
font-size: 16px;
display: block;
}
https://jsfiddle.net/tqejgae0/2/
Screenshot:
Related
The background color in each todo-section does not cover the entire row when the checkbox is selected. The background color does not reach behind the checkbox. This is one of the todo-sections in my html from the form. It's one of 13 set up the exact same way. Please click the [enter image description here] link above for a visual of what I'm trying to convey.
Below is the associated CSS. The issue that I'm having is that when the box is checked, the line strikes through the text like it's supposed to and the associated color appears in the background as well. However, the color isn't reaching behind the checkbox. Screenshot provided above in link.
.todo-section [type=checkbox]:checked+label {
text-decoration: line-through;
background-color: #D7B99E;
}
.todo-section {
display: flex;
flex-direction: row;
border-bottom: 1px solid #000000;
}
<form>
<div class="todo-section">
<input type="checkbox" id="todo1" name="todo1" value="ID"><label for="todo1" class="checked"> Please bring picture ID and insurance card on the day of your
procedure.</label> </div>
</form>
There is no way to select a parent in CSS, however, there's still some "magic" to achieve this if you work with the positioning of the elements.
.todo-section [type=checkbox]:checked+label {
text-decoration: line-through;
background-color: #D7B99E;
}
input {
position: absolute;
z-index: 10;
}
label {
width: 100%;
position: absolute;
top: 0;
left: 0;
text-indent: 30px;
z-index: 1;
}
.todo-section {
display: flex;
flex-direction: row;
border-bottom: 1px solid #000000;
position: relative;
height: 20px;
}
<form>
<div class="todo-section">
<input type="checkbox" id="todo1" name="todo1" value="ID"><label for="todo1" class="checked"> Please bring picture ID and insurance card on the day of your
procedure.</label>
</div>
</form>
While support is lacking currently, in the future, the :has() pseudo-class does what you want.
In this case, it will target the entire .todo-section, rather than just the label as the original selector did.
Note that version 105+ of Chrome supports the selector, and I would expect other Chromium-based browsers to follow suit soon as well. In fact, my copy of Microsoft Edge (Version 103.0.1264.77 (Official build) (64-bit)) renders the following snippet correctly, even though technically it shouldn't be able to...
.todo-section:has([type=checkbox]:checked) {
text-decoration: line-through;
background-color: #D7B99E;
}
.todo-section {
display: flex;
flex-direction: row;
border-bottom: 1px solid #000000;
}
<form>
<div class="todo-section">
<input type="checkbox" id="todo1" name="todo1" value="ID"><label for="todo1" class="checked"> Please bring picture ID and insurance card on the day of your
procedure.</label> </div>
</form>
You may also use grid and set both elements inside the same cell (alike absolute but in the flow), padding and margin can be used to align elements and keep their content away from each others.
here is an example:
.todo-section [type=checkbox]:checked+label {
text-decoration: line-through;
background-color: #D7B99E;
}
.todo-section {
border-bottom: 1px solid #000000;
}
/* grid layout VS absolute */
/* base needed */
.todo-section {
display: grid;
}
.todo-section>* {
grid-row: 1;
grid-column: 1
}
/*demo makeup */
.todo-section {
margin:1em 5em;
background:#bee
}
input {
margin: auto;
margin-inline-start: 0.5em; /* will follow the document direction */
position: relative; /*To keep it on top
or use
transform:scale(1) ;
or any transform value that is set to defaut */
}
label {
padding-inline-start: 2em; /* will follow the document direction */
}
<form>
<div class="todo-section">
<input type="checkbox" id="todo1" name="todo1" value="ID">
<label for="todo1" class="checked"> Please bring picture ID and insurance card on the day of your
procedure.</label>
</div>
<div class="todo-section" dir="rtl">
<input type="checkbox" id="todo2" name="todo1" value="ID">
<label for="todo2" class="checked"> Please bring picture ID and insurance card on the day of your
procedure.</label>
</div>
</form>
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 am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).
Currently, I obtain the following (left) while I would like the one on the right:
I used the following code (see the JSFiddle):
CSS
Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with font-awesome:
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
}
input[type=checkbox]:checked + label:before {
letter-spacing: 8px;
}
HTML
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>
I have tried to modify the margin-left and text-indent attributes of the label and label:before selectors but without any success.
Any idea how I could have the correct indent while using the nice font-awesome icons?
Thank you very much for your help!
Add this style (tested both on Chrome and Firefox)
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
Final result:
After trying fcalderan's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green nowadays.
If you put the input/label pairs in divs as it is recommended by Mozilla, you can style them this way.
fieldset {
width: 13ch;
}
fieldset > div {
display: flex;
}
fieldset > div > * {
align-self: baseline;
}
fieldset > div > input[type=checkbox] {
margin: 0 0.5ch 0 0;
width: 1em;
height: 1em;
}
<fieldset>
<legend>Sichtbarkeit</legend>
<div>
<input id="c1" checked="" type="checkbox">
<label for="c1">Minuten</label>
</div>
<div>
<input id="c2" checked="" type="checkbox">
<label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
</div>
<div>
<input id="c3" checked="" type="checkbox">
<label for="c3">Stunden</label>
</div>
<div>
<input id="c4" checked="" type="checkbox">
<label for="c4">Nur 12 Stunden</label>
</div>
</fieldset>
Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:
label{
display: inline-block;
margin-left: 20px;
}
label:before{
margin-left: -23px;
}
The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.
Could someone explain how the last part of the code works? Specifically:
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}
I'm just starting with CSS as a newb and wanted to try to create some interactive CSS tabs; which lead me to look at some existing code out there. Needless to say it has left me quite confused.
Why is [type=radio]:checked needed? It had z-index: 2; inside the brackets but I took that out and the code still works just fine; although when I try and delete [type=radio]:checked all together the code breaks. Why? It has no properties currently.
[type=radio]:checked ~ .content used to be [type=radio]:checked ~ label ~ .content but I took out label and it still works fine. Why was it ever needed?
HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
tab#1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
tab#2
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
tab#3
</div>
</div>
</div>
</html>
CSS:
.tabs {
position: relative;
height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}
The last part of your CSS:
[type=radio]:checked {
}
[type=radio]:checked ~ .content {
z-index: 1;
}
This is giving a z-index to the class content. Since only one tab is clicked it is giving a z-index to only one content class and that makes it display. (Since no others have a z-index)
If you want to see how it works then add a z-index to the content class, lets say 10, in your CSS and watch how it gets all screwy. Now since that code is only giving a z-index: 1; it doesn't display correctly since they all have 10 in this example. Now go to the above snidbit of code and put a z-index: 11; and watch how it works correctly. Since only one gets a high z-index: 11; it becomes the displaying one.
If you don't know what the [type=radio]:checked means, it is pertaining to an active state or clicked state for that radio input.
This part of code: [type=radio]:checked ~ label ~ .content is allowing a more distinguished and precise selection of a DOM element. It will work without it because .content is below the radio tag. It will only apply to an element that is 1. input radio > 2. label > 3. .content.
If you also don't know what z-index does then let me know and I'll brake that down.
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}