i have a "vue" application working properly in all browsers except internet explorer.
The main error I find in IE is the fact that it does not recognize the value of an input if I hide it and wrap it with an image.
This would be my html
<div class="item-wrapper">
<form class="item-form" #submit.prevent="onSubmit">
<div class="cie-item-image" v-on:click="imageSelected = true">
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="1"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/1.png" />
</label>
<p class="cie-item-subtitle">Pen</p>
</div>
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="2"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/2.png" />
</label>
<p class="cie-item-subtitle">Pencil</p>
</div>
<div class="cie-item-column">
<label>
<input
type="radio"
name="selectedItem"
value="3"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img src="../../assets/3.png" />
</label>
<p class="cie-item-subtitle">Rubber</p>
</div>
</div>
and here as the hidden with css
.cie-item-image {
display: flex;
justify-content: space-around;
}
.cie-item-column img {
display: block; /* removes the spacing underneath the image */
width: 365px; /* sets the width to the parents width */
height: 244px; /* set the height to the parents height */
object-fit: cover; /* prevents image from stretching */
border: 3px solid transparent;
cursor: pointer;
}
.cie-item-column:hover .cie-item-subtitle:before,
.cie-item-column:focus .cie-item-subtitle:before {
visibility: visible;
transform: scaleX(1);
}
.cie-item-column:hover img {
border: 3px solid $secondaryColor;
cursor: pointer;
opacity: 1;
}
/* IMAGE STYLES */
[type="radio"] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type="radio"]:checked + img {
outline: 2px solid $secondaryColor;
opacity: 1;
}
[type="radio"] + img {
opacity: 0.4;
}
.sub-title {
padding: 5px 0px 5px 0px;
display: flex;
justify-content: center;
color: $tertiaryColor;
font-family: "RalewayRegular";
font-weight: italic;
font-size: 20px;
margin-top: 30px;
font-weight: bolder;
}
Here I leave a link in which you can see the correct operation, in which if I select an image is selected and the method onchange returns me the correct data.
https://codepen.io/CharlieJS/pen/QWNJvXz
As I explained before, in all browsers it is working correctly except in IE, in which if I don't show the input and select it directly it doesn't recognize the value when selecting the image (neither returns value nor gives the style of selected)
Why do I get this error only in internet explorer?
What can you do to unify the style criteria and apply something similar in IE?
a greeting and thank you all for your time and help
I have found a solution from #Qtax
label{
display: inline-block;
}
label img{
pointer-events: none;
}
with this link
http://jsfiddle.net/VdJ9m/
and it works perfect
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
For those not familiar, the checked attribute for a checkbox will accept any input as a sign to check the box. in fact, it doesnt need any text. so all these will check the box
<input type="checkbox" checked />
<input type="checkbox" checked="false">
<input type="checkbox" checked="">
<input type="checkbox" checked="0">
all those WILL check the box.
My problem is i am being handed a checked box, and need to uncheck it. I cant just change its value - that still makes it checked. i need to nuke it from orbit. This is incredibly easy to do with javascript or jQuery, but the site does not allow any of that in my CSS.
I read a list of about 100 attributes and how to reset them - auto, normal, 0, inherit, et cetera, but 'checked' was not on the list, and i tried all of those and anything i could think of, and this checkmark wont die.
The simple answer is NO, CSS cannot help you uncheck the checkbox..
BUT
You can use CSS to detect whether the input element is checked or not by using :checked and :not(:checked) ..
Test Case : Demo
HTML
<ul>
<li>
<input type="checkbox" checked />
<label for="">Checked</label>
</li>
<li>
<input type="checkbox">
<label for="">Unchecked</label>
</li>
<li>
<input type="checkbox" checked>
<label for="">Checked Again</label>
</li>
</ul>
CSS
input:checked + label {
color: green;
}
input:not(:checked) + label {
color: red;
}
CSS is not for dom manipulation, its for dom styling and arrangements, You can not set dom attributes from css but you can check for css conditions and set styles. :)
Its possible to check/uncheck checkbox using jquery. Here is the code:
$('#textCheckbox').attr('checked', true); // Enable CheckBox
$('#textCheckbox').attr('checked', false); // Disable CheckBox
After alteration, following will be the output of your input field
<input type="checkbox" id="textCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="textCheckbox" /> <!-- Unchecked -->
Fill free to mark correct answer if you think this is what you are looking at..
Question was asked 6 years ago but it should be noted you can give the appearance of an unchecked checkbox with CSS:
* {
margin: 0;
padding: 0;
font-family: Arial;
text-transform: capitalize;
}
html, body { padding: 1rem; }
input { display: none; }
label, label::after, hr, hr::after {
display: block;
overflow: visible;
position: relative;
transform: scale( 0.8 );
width: 1rem;
height: 1rem;
border-style: none;
border-radius: 0.125rem;
box-shadow: 0rem 0rem 0rem 0.0625rem #666;
content: '';
}
label::after, hr, hr::after {
transform: scale( 1.15 );
background-color: #07f;
box-shadow: none;
}
label::after { display: none; }
label:hover { box-shadow: 0rem 0rem 0rem 0.0625rem #222; }
label:hover::after { background-color: #06e; }
label:active::after { background-color: #18f; }
<style>
hr, hr::after {
position: absolute;
top: 0; left: 0.5rem;
z-index: 1;
transform: rotate( 40deg );
width: 0.225rem;
height: 0.9rem;
background-color: #fff;
border-radius: 0;
}
hr::after {
top: 0.6rem; left: -0.17rem;
transform: rotate( -90deg );
height: 0.4rem;
}
#one:checked ~ [ for='one' ]::after { display: block; }
[ for='two' ]::after { display: block; }
#one:checked ~ [ for='two' ]::after { display: none; }
</style>
<input type='checkbox' id='one'>
<input type='checkbox' id='two' checked>
<p>check me</p>
<label for='one'> <hr> </label>
<br>
<p>to uncheck me</p>
<label for='two'> <hr> </label>
Is there a way to control the size of the radio button in CSS ?
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
A solution which works quite well is described right here:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the appearance property, which when set to none allows to change the width and height of the radio button.
The radio buttons are not blurry, and you can add other effects like transitions and stuff.
Here's an example :
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
outline: unset !important /* I added this one for Edge (chromium) support */
}
The only drawback is that it is not supported yet on IE.
Here's a GIF below to give an idea of what can be achieved. The result will look nicer on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
hide the radio button using javascript.
Use javascript to add/display HTML that can be styled how you like e.g.
Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).
javascript
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
html
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness not IE's fault, hosted test on netrenderer.com)
CSS:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Well, I am from the future as compared to the posted year of this question, but I believe my answer will benefit all the new visitors:
So if you want to increase the size of the "radio" button with CSS you can simply do it by putting the following styling rules in CSS and it will help you,
input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;
}
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
Directly you can not do this. [As per my knowledge].
You should use images to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
(Vue3) HTML:
<h2>Group By</h2>
<div class="radioButtons">
<label><input type="radio" id="groupByDevice"
v-model="data.groupBy" value="device" />
<span>Device Location</span>
</label>
<label><input type="radio" id="groupByLocation"
v-model="data.groupBy" value="location" />
<span>Device Type</span></label>
</div>
</div>
SASS:
$vw-viewport: 2400px;
#function toVw($vw-viewport, $value) {
#return ($value / $vw-viewport) * 100vw;
}
label {
font-size: toVw($vw-viewport, 16px);
line-height: toVw($vw-viewport, 18px);
}
.radioButtons {
> label {
white-space: no-wrap;
display: inline-block;
height: toVw($vw-viewport, 22px);
margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;
> input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
border-radius: 50%;
width: toVw($vw-viewport, 18px);
height:toVw($vw-viewport, 18px);
border: toVw($vw-viewport,2px) solid #747474;
margin: 0;
position: relative;
top: toVw($vw-viewport, 2px);
background: white;
&::after {
content: '';
position: absolute;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;
width: auto;
height: auto;
background: rgb(80, 95, 226);
opacity: 0;
border-radius: 50%;
transition: 0.2s opacity linear;
}
&:checked {
&::after {
opacity: 1 !important;
background: rgb(80, 95, 226) !important;
}
}
}
&:hover {
cursor: pointer;
> input[type=radio]::after {
opacity: 1;
background: #cfd1e2;
}
}
> span {
display: inline-block;
position: relative;
top: toVw($vw-viewport, -1px);
padding-left: toVw($vw-viewport, 7px);
}
}
}
The result is like this. On hover, a gray dot appears as well. The labels will wrap horizontally when there is room, there was not enough room here so they stack. This scales with the page. If you don't need that, remove the SASS function and use the pixels directly. This is a case where !important is being used correctly IMHO, in this case to override hover when the radio is checked.
try this code... it may be the ans what you exactly looking for
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>
Is there any way to make a radio button bigger using CSS?
If not, how else can I do it?
Try this code:
input[type='radio'] {
transform: scale(2);
}
You can easily able to set it's height and width as with any element.
Here is the fiddle with code
JSFIDDLE BIG RADIO BUTTON
HTML
<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>
CSS
input[type=radio] {
display: none;
}
input[type=radio] + label::before {
content: '';
display: inline-block;
border: 1px solid #000;
border-radius: 50%;
margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
background-color: #ffa;
}
.radio1 + label::before {
width: 0.5em;
height: 0.5em;
}
.radio2 + label::before {
width: 0.75em;
height: 0.75em;
}
.radio3 + label::before {
width: 1em;
height: 1em;
}
.radio4 + label::before {
width: 1.5em;
height: 1.5em;
}
Styling radio button is not easy.
Form elements in general are either problematic or impossible to style using CSS alone.
Just go through this link for your own style with bigger size for radio buttons..
Also look at this link...
Bigger radio buttons
Don't use transform: scale(1.3), it really looks horrible. Just use this:
input[type='radio'] {
height: 15px;
width: 15px;
vertical-align: middle;
}
<input type="radio">Select this item
You can do it using CSS but browser and OS also impact on this. Look at following article.
Styling radio buttons with CSS
Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/
There might be some quirky <span> tricks inside radio elements but I imagine using them across different browsers would be annoying to debug.
I've used this script in the past but not recently.
CSS3 transform scale is blurry. Setting height & width does not work with FF (even the newest 66 does not support, 2020). The only cross-browser solution is custom HTML markup + CSS, which unfortunatelly is not the easiest way. See helpful tutorial custom radios & checkboxes.