I want to make a CSS that will change the style of input type=radio. However, when I click another radio, the first one will still looked like that it is checked.
Here is my code and I tried to make the code as short as I can:
input[class=b][type=radio]:checked::before {
content: "";
display: block;
position: relative;
width: 12px;
height: 12px;
border: 2px solid red;
}
input[class=b][type=radio]:not(checked)::before {
content: "";
display: block;
position: relative;
width: 12px;
height: 12px;
border: 2px solid;
border-radius: 25px;
background: blue;
}
input[class=b][type=radio]:not(checked)::after {
content: "";
display: block;
visibility: hidden;
position: relative;
}
input[class=b][type=radio]:checked::after {
content: "";
display: block;
visibility: visible;
width: 5px;
height: 5px;
border: solid 2px red;
border-width: 5px 5px 5px 5px;
background: red;
border-radius: 25px;
position: relative;
transform: translateY(-15px)
}
HTML code:
<input type="radio" class="b" id="check1"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>
I wonder how to make it switch between checked and not checked by just using CSS. Also, I want the CSS event(such as :hover) of checked and not checked, because I want to change the style depending on its state.
The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.
<input type="radio" class="b" id="check1" name="test"><label for="check1">test</label>
<br>
<input type="radio" class="b" id="check2" name="test"><label for="check2">test2</label>
<p>They will both look like checked if you click each of them</p>
I use custom radio buttons which I need to verify via HTML5 form verification. Each option has the required attribute. The CSS :invalid selector should then color the border of the span covering the button in red as soon as the user clicks the form submit button. Unfortunately, the border gets colored on-load of the page, submit button hasn't been even clicked. Any ideas?
input[type="radio"] {
opacity: 0;
position: absolute;
z-index: -1;
}
label input[type="radio"]:checked+.form-btn-radio {
background-color: blue;
text-decoration: none;
color: white;
border: 2px solid blue;
}
label input[type="radio"]:invalid+.form-btn-radio {
border: 2px solid red;
}
.form-btn-radio {
border: 2px solid black;
color: black;
padding: 10px 25px 10px 25px;
min-width: 60px;
background-color: white;
text-decoration: none;
text-align: center;
display: inline-block;
cursor: pointer;
}
<label for="apply">
<input type="radio" id="apply" name="apply" value="easy" required>
<div class="form-btn-radio">Option 1 Name</div>
</label>
<label for="apply-external">
<input type="radio" id="apply" name="apply" value="url" required>
<div class="form-btn-radio">Option 2 Name</div>
</label>
found the issue: "If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)"
developer.mozilla.org/en-US/docs/Web/CSS/:invalid
So JS is the only solution if you don't want to have one of the radios pre-selected.
The white part should be on the tick. At first whole thing should be black and it should turn white on click.I am trying it on Storybook. Also, please help me with poisitioning.
<span className={css.cb}>
<input type="checkbox" value="1" id="checkboxInput" name=""/>
<label for="checkboxInput"></label>
</span>
Here is the CSS !
#import "base.scss";
.cb {
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 10px;
top: 5px;
background: #000000;
border-radius: 5px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.75);
}
.cb label {
display: inline-block;
position: absolute;
width: 12px;
height: 12px;
left: 4px;
top: 10px;
background: #000000;
border-radius: 5px;
}
.cb input[type=checkbox]:checked + label {
background: #FFFFFF;
}
See if i understand your problem
.You want to change the class of span on the bases of click on checkbox.For that you need state of react class , method to handle click on checkbox , and little change in your present code
setting state
constructor(props){
super(props)
this.state = {
isChecked = false
}
this.handleClick = this.handleClick.bind(this)
}
this may be your constructor of class
below we are setting method
handleClick(e){
e.preventDefault()
this.setState({"isChecked":!this.state.isChecked})
}
this can be your method
this contain some changes needed in your present code.
<span className={this.state.isChecked?"yourClassForWhiteBackground":"yourClassForBlackBackground"}>
<input type="checkbox" onClick={this.handleClick}value="1" id="checkboxInput" name=""/>
<label for="checkboxInput"></label>
</span>
hope is the solution you are looking for
I am using JAWS to read ARIA-LABEL for the checkbox.
This checkbox has the opacity as 0. basically we are displaying another label instead of the checkbox to get a customized look for the checkbox.We capture the click on the hidden checkbox and display the label which displays it as a checkbox with filled color and a checked symbol.
Click is captured when we click the checkbox along with the Compare label following it.(trapping the click event on the span, which has the checkbox and the label both)
JAWS is not able to read the ARIA-LABEL ="Select to add the item to comparison list"
I am not sure what would be the correct location to place this label in order to be read JAWS.
<span class="newCheckbox" tabindex="0" (keyup)="OnPressCompareClick(productDetails?.Id,$event)">
<input type="checkbox" [value]="compareListCount" [checked]="isAddedInCompare(productDetails?.Id)" (change)="OnChangeUpdateProductCompareList(productDetails?.Id, $event)" (click)="onCompareClick($event)"
style="display:block;margin-top:14px;position:absolute;" role="checkbox"
id="chkAddCompare" >
<label aria-label="Select to add the item to comparison list" class="compare-defaultFont" attr.for="Compare{{i}}" > Compare</label>
</span>
.newCheckbox input[type=checkbox] {
display: none;
opacity: 0;
}
.newCheckbox label:before {
content: "";
text-shadow: 0px 0px 0px #fff;
color: #fff;
width: 14px;
height: 14px;
border: 1px solid #0075d5;
background-color: #fff;
border-radius: 0px;
font-weight: 400 !important;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif !important;
color: #555;
font-size: 14px !important;
display: inline-block;
vertical-align: -2px;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
text-shadow: 0px 0px 0px #fff;
font-size: 14px;
color: #fff;
text-align: left;
width: 14px;
height: 14px;
line-height: 15px;
border: 1px solid #0075d5;
background-color: #0075d5;
vertical-align: -2px;
}
Put the aria-label on the control itself, not on the <label> element.
I don't know which language you are using, but apparently, the id of the input does not match the for attribute of the label tag, according to your code:
<input type="checkbox" id="chkAddCompare" >
<label aria-label="Select to add..." [...] attr.for="Compare{{i}}" > Compare</label>
You can easily enclose the input tag in your label:
<label [...]> Compare
<input type="checkbox" aria-label="Select to add...">
</label>
Try this, worked for me on an accordion with hidden checkbox
<label id="mylabel" aria-label="For check box"></label>
<input type="checkbox" id="chkAddCompare" aria-labelledby="mylabel" >
Also note the label must come BEFORE the control.
This question already has answers here:
How to customize <input type="file">?
(18 answers)
Closed 6 years ago.
I'm trying to style a file upload button to my personal preferences, but I couldn't find any really solid ways to do this without JS. I did find two other questions about this subject, but the answers there either involved JavaScript, or suggested Quirksmode's approach.
My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it. I've made some code, based on it, but it will just take up the space the file button would normally take up, so it won't at all fill the parent div like I want it to.
HTML:
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>
CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
This fiddle demonstrates how this approach is quite flawed. In Chrome, clicking the !! below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn't take up the correct areas of the button.
Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little 'hacky' coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?
I'm posting this because (to my surprise) there was no other place I could find that recommended this.
There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling[1].
The label tag was made for the exact purpose of directing any click events on it to the child inputs[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
<label class="myLabel">
<input type="file" required/>
<span>My Label</span>
</label>
I've used a fixed position to hide the input, to make it work even in ancient versions of Internet Explorer (emulated IE8- refused to work on a visibility:hidden or display:none file-input). I've tested in emulated IE7 and up, and it worked perfectly.
You can't use <button>s inside <label> tags unfortunately, so you'll have to define the styles for the buttons yourself. To me, this is the only downside to this approach.
If the for attribute is defined, its value is used to trigger the input with the same id as the for attribute on the <label>.
Please find below a way that works on all browsers. Basically I put the input on top the image.
I make it huge using font-size so the user is always clicking the upload button.
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}
<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
The best example is this one, No hiding, No jQuery, It's completely pure CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input type="file" class="custom-file-input">
This seems to take care of business pretty well. A fidde is here:
HTML
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->
CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}
Any easy way to cover ALL file inputs is to just style your input[type=button] and drop this in globally to turn file inputs into buttons:
$(document).ready(function() {
$("input[type=file]").each(function () {
var thisInput$ = $(this);
var newElement = $("<input type='button' value='Choose File' />");
newElement.click(function() {
thisInput$.click();
});
thisInput$.after(newElement);
thisInput$.hide();
});
});
Here's some sample button CSS that I got from http://cssdeck.com/labs/beautiful-flat-buttons:
input[type=button] {
position: relative;
vertical-align: top;
width: 100%;
height: 60px;
padding: 0;
font-size: 22px;
color:white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #454545;
border: 0;
border-bottom: 2px solid #2f2e2e;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2f2e2e;
box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
I just came across this problem and have written a solution for those of you who are using Angular. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.
the directive
angular.module('myCoolApp')
.directive('fileButton', function () {
return {
templateUrl: 'components/directives/fileButton/fileButton.html',
restrict: 'E',
link: function (scope, element, attributes) {
var container = angular.element('.file-upload-container');
var button = angular.element('.file-upload-button');
container.css({
position: 'relative',
overflow: 'hidden',
width: button.offsetWidth,
height: button.offsetHeight
})
}
};
});
a jade template if you are using jade
div(class="file-upload-container")
button(class="file-upload-button") +
input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
the same template in html if you are using html
<div class="file-upload-container">
<button class="file-upload-button"></button>
<input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" />
</div>
the css
.file-upload-button {
margin-top: 40px;
padding: 30px;
border: 1px solid black;
height: 100px;
width: 100px;
background: transparent;
font-size: 66px;
padding-top: 0px;
border-radius: 5px;
border: 2px solid rgb(255, 228, 0);
color: rgb(255, 228, 0);
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
It's also easy to style the label if you are working with Bootstrap and LESS:
label {
.btn();
.btn-primary();
> input[type="file"] {
display: none;
}
}