I have used some Checkboxes and Radiobuttons in site. On Zooming size of Radio Buttons and Checkboxes is getting increased in IE and Chrome.
To increase size of Radio Buttons and Checkboxes in Mozilla Firefox I have used this CSS:
input[type="radio"]
{
-moz-appearance: none;
}
input[type="checkbox"]
{
-moz-appearance: none;
}
But the problem is that with this CSS Radio buttons are not reflecting properly, semi-circle part of radio button is reflecting without border.
Is there any way to fix this. Issue is reflecting only in Mozilla. Please suggest any alternative way to zoom size in Mozilla.
I am unable to post complete HTML here.
There is also a Ticket here:
https://bugzilla.mozilla.org/show_bug.cgi?id=400364
*{
outline: none;
}
try this...
Related
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?
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've been noticing that if clicking on a button on my site (as shown in the example below) a gradient border is shown around the button. I've tried several browsers but this only shows in Google Chrome.
Is there a way of removing this CSS wize?
You can disable the outline with outline:none.
input,
select,
textarea,
button {
outline: none;
}
And to stay safe with focus states:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
However, some think it isn't a good idea to disable the outline due to accessibility issues (http://outlinenone.com/)
This is to show that the element is active. To disable this:
#element.focus{
outline:0;
}
I have a simple div that if clicked to much turns blue: JsFiddle
In Chrome its worse, the whole div(30x30px + some other surounding elements) turns blue. Is there anything I can do about this (other than using img)?
Sorry for asking, but isn't this just you marking it by double-clicking it? The "blue" highlight effect would be the normal behaviour in all browsers...
If you do not want this behavior, you should make sure it is not selectable by applying styles:
-moz-user-select: none;
-webkit-user-select: none;
Updated:
For Internet Explorer, use the unselectable tag on your div:
<div class="right" unselectable="on">»</div>
This CSS will do the trick:
div::selection {
display:none;
}
It sets the selection (highlight) to display:none, so you don't see it.
Is it possible to remove the borders around a checkbox so that it appears invisible? I have it placed in a DIV with a color background.
As this is the first result for me when searching for "remove checkbox border" in Google, let me mention that checkbox default styling could be removed in all browsers except IE with the appearance property:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Unfortunately, its not possible to remove borders on browser native checkboxes (it will not work in all browsers), You will have to write your own checkbox-like state widget to implement this. Check out Nice forms if you want to style your regular form controls with custom styling
For FireFox: try border:none.
For IE try: style="background:transparent;border:0"
The other solution is to create your own images for checked and unchecked displaying the appropriate onclick of the image.
I know this is a late answer, but a CSS expert I work with gave me this way to get rid of the border around a checkbox (and probably radio button) in IE10:
Set the border color to the same color as the page's background.
Apply a box-shadow of "none" to it.
That's it. Worked like a charm!
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
In CSS this is possible by setting the web kit appearance to none. Something like this
-webkit-appearance: none;
You would have to use some widget or a custom ui of some sort to remove the borders.
I'm not sure if this works: <input type="checkbox" style="border: 0;" />