Custom checkbox in Safari - html

I created custom radio input
My code:
.options input[type="radio"] {
display: none;
-webkit-appearance: none;
}
.options input[type="radio"]:checked + .poll-field img {
opacity: 1;
filter: alpha(opacity=1);
background-size: 100%;
background-position: center;
background-image: url("https://example.com/img/checkmark.png");
background-repeat: no-repeat;
}
<div class="col-12 col-md-8 options">
<label for="p2_1_1">
<input type="radio" name="p2_1" value="1" id="p2_1_1"/>
<div class="poll-field">
<span class="poll-text">1</span>
<img src="{{ asset('img/check_empty.png') }}" class="poll-img-check">
</div>
</label>
</div>
It works on Chrome, Firefox, even on IE, but not on Safari (13.0.4).
On Safari I can mark only the first option. When I try to select a different number than "1" - the checkmark didn't appear.
Checkmarks only appear when I open web inspector, pick ANY element and unmark and mark some CSS rule (in any CSS class).
Have someone similar problem or have any idea to solve this?

I added this and it fixed all
.options input[type="radio"]:checked + .poll-field {
background-color: white;
}

Related

how to hide a input type radio in IE and collect the value?

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

radio button with custom background image turns black in internet explorer

I need to render radiobuttons on my site with specific background-images:
not checked
, checked
I solved this problem by adding the following styles for radiobutton elements:
{
width: 20px;
height: 20px;
-webkit-appearance: none;
background-image: url(/Images/notChackedRadioButton.png);
background-repeat: no-repeat;
}
Everything was fine, but when i open my site in Internet Explorer I see that all radiobuttons became black.
Seems like IE adds its own image above my background image, but I don't have any idea how to solve this. Please, any suggestions will be helpful.
Not knowing the rest of your code here is an example of a way you can do it. Works in IE 11 and IE Edge. Found on codepen for rest of the example - https://codepen.io/tutsplus/pen/bgqYJz
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p>
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>

hidden file input element not working on IE Edge

I created the following where an icon is pressed to initiate the upload process instead of the usual browse.... It works in Chrome, FireFox, and I believe in older versions of IE (I tested it using IE's Document Mode) except Edge. On IE Edge when the icon is clicked nothing happens.
What can I do to make it work in Chrome, Firefox, IE Edge and at least IE 10 and 9?
Result: https://jsfiddle.net/sk5cg2wy/
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
.upload-wrapper input {
display: none;
}
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->
Strange behavior of the IE-Edge didn't know that this is exists.
You can try to add image to the label as background-image, I've tested it in IE-Edge (Windows 7) and it's work.
JSFiddle
HTML:
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<!--<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>-->
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->
CSS:
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
[for="file-input"] {
display: block;
background-color: #ddd; /*as fallback*/
background: url(http://i.imgur.com/MIY6LmH.png);
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 250px;
}
.upload-wrapper input {
display: none;
}
#Konrud already wrote a workaround, but it doesn't fix/explain the actual problem. As far as I've analysed, it doesn't work because the label is no block-element and therefore takes no space. Edge is actually behaving correctly. Add display block and it will work (also in other browser behaving "correctly":
label {
display: block;
}

Change the outlook of checkbox as image

Hi I have different check boxes and I want to have an image instead of the check boxes so if I click the image the background should change so as to indicate whether it is checked or not.
As I have different checkboxes so I cannot put the background as an image in the CSS.
Please suggest how should I go ahead.
See Here. You can apply this to your code and have the custom background
HTML:
<div class="amPmCheckbox">
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
<label for="am_2">AM</label>
</div>
CSS:
.amPmCheckbox input[type="checkbox"] {
display: none;
}
.amPmCheckbox input[type="checkbox"]+label {
background: url('http://renegadeox.com/img/off.png') no-repeat;
height:17px;
padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png') no-repeat;
height:17px;
}
http://jsfiddle.net/JkDhN/1/

Force label background: url() In Internet explorer

I have a Html/Css code that work fine in Chrome and firefox but in IE i can't show up the background for my label
i have two class css one for active lable and other for no active.
Here is my Css Code:
.jqTransformDayRadioWrapper label {
width: 31px !important;
height: 28px;
margin-right: 2px;
text-align: center;
font-weight: normal;
line-height: 28px;
cursor: pointer;
background: url('../img/form/day_radio_button.gif') no-repeat;
}
.jqTransformDayRadioWrapper label.active {
background: url('../img/form/day_radio_button_selected.gif') no-repeat !important;
}
And Here is the HTML code generate by Cakephp Html Helper Form :
<div class="jqTransformDayRadioWrapper">
<label for="EventReoccurringOnDay1">S</label>
<input name="data[Event][reoccurring_on_day1]" type="text" class="jqTransformDayRadioWrapper" value="0" id="EventReoccurringOnDay1" />
<label for="EventReoccurringOnDay5">T</label>
<input name="data[Event][reoccurring_on_day5]" type="text" checked="checked" class="jqTransformDayRadioWrapper" value="1" id="EventReoccurringOnDay5" />
</div>
</div>
Thanks in advance:).
You will need to set your label to display:block; because labels are inline elements. And without display:block; your background image will not appear in IE 7.