i am using this css code for hover color for the text area and inputs it works fine in all browsers except IE its show like the image below. How to set the radio button background only to transparent.
my css code:
input:focus, input:hover, textarea:focus, textarea:hover {
border: 0 none;
background: blue;
}
Since you're styling input directly, radiobuttons and checkboxes will also be targeted. An easy way to avoid that is to use the :not() selector like so: input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=button]):focus. Note that this doesn't work in IE<8(?) though.
powerbuoy is right about that the input selector select checkboxes and radios in addition to the normal text boxes.
but i have a suggestion that you can use instead of his that will work in more browsers.
basically you can add a class to all your checkbox and radio buttons inputs.
so your checkbox and radio html becomes
<input type="checkbox" class="checkbox">
<input type="radio" class="radio">
and then add the css to reset the style for the checkboxes and radios like that
input.checkbox, input.radio
{
background:transparent;
}
Related
Consider this checkbox:
<input type="checkbox" />
When pressing a keyboard button when this checkbox is focused, a solid black outline appears around it. I can get rid of by removing the outline:
input {
outline: none;
}
<input type="checkbox" />
However, I wish to apply an outline to the actual element, and this method would invalidate it. I was wondering if there was a pseudoclass that could be used to select this checkbox state. If so, what is it called and how do I access it? If not, is there any other viable way (CSS only) to do achieve this? I thought the :focused pseudoclass would work, but this selects the focused state of the checkbox and not whatever this state is, when the checkbox is focused and a key is pressed.
P.S. when I add an outline to the checkbox, the problem appears in a different format. The outline is somehow "extended", almost as if a padding or border was added to the element (try focusing on the following checkbox and pressing a key):
input {
outline: solid red 3px;
}
<input type="checkbox" />
I think outline-offset: 0px; under the element state focus-visible is what you're looking for:
input {
outline: solid red 3px;
}
input:focus-visible
{
outline-offset: 0px;
}
<input type="checkbox" />
The checkbox is an HTML element used to take input from the user. This HTML element is generally used on every website, but without styling them, they look similar on every website.
I am a limited knowledge in html and css. Please excuse if it is a silly question. I have tried in different ways, but could not solve this issue.
http://teddyslist.com/dev/register.php
At the bottom of the page, there is a radio button saying "Preferred mode of contact".
<input type="radio" name="preferredcontact" value="P"> Phone
<input type="radio" name="preferredcontact" value="E"> Email
Radio buttons are showing in Firefox and even on IE. But they are not showing in Chrome and Safari. It is very strange to me. I think there is some conflict in CSS.
When I inspected your code, I could see that you have a style -webkit-appearance: none; that is specified for input, textarea, button in realsite.css
The CSS is as follows
input, textarea, button {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
resize: none;
}
To make the radio buttons visible, either remove -webkit-appearance: none; from the CSS OR add a style as below
input[type="radio"]{
-webkit-appearance: radio;
}
Here is a screenshot
I realize that this post does not mention Bootstrap CSS as a keyword or tag but one thing I would mention is that if you are having the exact same result which is that the radio buttons do not show up in Chrome but are present in Firefox and IE, but, you are also using Bootstrap CSS then you will want to ensure that you do not have the class name "form-control" on the radio button input tag specifically. Essentially, you can use the class name "form-control" on every other form element type except the radio button input type. Using that class "form-control" on a radio button tag makes it disappear therefore just remove the class attribute and the radio button will appear. At first I thought this was a Chrome issue but found the radio buttons would appear when I removed the reference to the Bootstrap CSS.
If you use :
input{
display:none;
}
then radio button will not be displayed.
By default it takes the value display: none;
Change it to:
input{
display: inline;
}
and it will be visible.
You have
-webkit-appearance: none;
set on checkboxes and radio. You need to style the checkboxes for them to appear, or simply get rid of the appearance: none
How to style checkbox using CSS?
I have a checkbox in label tag like this.
<label class="duck duck1">
<input type="checkbox">
</label>
I want if i click on checkbox, label and checkbox both should be display:none without jquery.
I tried this.
.duck input[type=checkbox]:checked + label.checkbox {display: none;}
jsfiddle
unfortunately, as i said before: using css, you can only select an element that comes after the one you clicked, not before and not a parent.
you can work around that however. Have a look at the following code:
if you reconstruct your html to have the label after the checkbox, and add the animated classes to the checkbox as well, to align it with the label:
<div class="main">
<input type="checkbox" class="duck duck1 cb_1"></input>
<label class="duck duck1"></label>
</div>
you will be able to select both in the following way:
input[type=checkbox].cb_1:checked,
input[type=checkbox].cb_1:checked + label {
display: none;
}
here is a fixed Fiddle
(the .cb_1 class is only meant for the z-index to make checkbox appear above the lable, and to avoid other checkboxes on the page hide irrelevant labels)
UPDATE:
another workaround would be to create the label (or duck image sprite) using the :after pseudo selector:
.duck:after{
content:'';
width: 50px;
height: 50px;
position: absolute;
}
here is an example with the :after selector: Duck Fiddle
In my application I am showing a graph with legends. Legends have colored checkboxes. Below is code for a checkbox that works fine in IE but the color does not appear in Chrome and Firefox
<input type="checkbox" style="background-color:#d65aef;">
Please tell me what should I do so that it works in IE,Chrome and Firefox. I have to use the hex color as used in the given code.
Form controls like checkbox, radio, select and etc using a platform-native styling based on the operating system's theme. You can reset it by using -moz-appearance and -webkit-appearance properties. But this properties will also reset sizes of control and may be something else, so you will need to add width/height manually:
input[type=checkbox] {
background: red;
-webkit-appearance: none;
-moz-appearance: none;
height: 16px;
width: 16px;
}
Also for checkbox you need to provide a checked state render:
input[type=checkbox]:checked {
background-image: url(/*custom checked icon url*/);
}
Close input into span (or div) and set span color.
<span style="background-color:#d65aef;"><input type="checkbox" class="base" name="w3wp" style="background-color:#d65aef;" value="w3wp" checked="" onclick="legendChanged();" alt="fd" title="w3wp"></span>
I have the following html:
<label>
<input type="checkbox" value="cb_val" name="cb_name">
my checkbox text
</label>
With CSS I added a background-color to the <label> tag.
label { background-color:#333; color:#FFF; }
Now I'd liked to change the background color of the label when the checkbox is checked.
I know how to do it with javascript, but is there a way to to it just using CSS?
I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.
I still hope to fix this without javascript, does anyone have a clue?
UPDATE:
As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure.
I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!
Or I can apply the background color to the label and the checkbox both.
Thanks everyone!
You can achieve this with pure css like so,
<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
my checkbox text
</label>
With this css,
label { background-color:#333; color:#FFF; }
input[type="checkbox"]:checked + label {
background: brown;
}
JSFIDDLE
Keep in mind
The label has to be after the checkbox so you will need to style it around more to keep the same look you had.
Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.
You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.
http://jsfiddle.net/QdDpL/
HTML
<label>
<input class="check" type="checkbox" />
<span class="label-text">Checkbox</span>
</label>
CSS
label {
background: yellow;
}
label .label-text {
background: cyan;
}
label input.check:checked + .label-text {
background: lime;
}
You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.
See the following links for browser support on the sibling selector:
http://caniuse.com/css-sel2
Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.