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;" />
Related
You can see the blue color on this hyperlink which i have visited. I am trying to remove this but still not able to get idea how to do this.
.myLink:visited,.myLink:hover,.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
}
Add this to your css class
outline: none;
border: 0;
Its maybe your outline or box-shadow or border when you hover...you have to check that by inspecting the element in the browser...
Use below css to the link:hover.
.myLink:visited,.myLink:hover,
.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
outline: none;
box-shadow: none;
border-color:transparent;
}
To avoid such cases, its always better to add css reset so that there is no need to always override the default browser styles, In your case its the default outline applied by the browser.
Check out this page , it will fix this issue as well as other you might face later.
.myLink:visited{
border:none;
}
I'd like to know, how to remove default arrow of selectbox and gradations in Checkbox and I wanna use custom image on it.
for example, here is some code.
<select class="selectParent">
<option value='1'>Title</option>
<option value='2'>Description</option>
<option value='3'>Author</option>
</select>
I searched some solutions to remove default status using -webkit- appearance; and -moz- appearance; but I have no idea in IE. Is there any possibility to remove a default status in IE?
as a same logic, I'd like to know, how to remove default status in checkbox.
<input type="checkbox" name="category" id="category10"/>
I'll be wating for good answers thx
appearance: none would work, but this is not a cross-browser way to do it.
select, input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
DEMO
EDIT:
Here is a cross-browser method for checkbox,
http://jsfiddle.net/kyLq4/1/
This is currently possible in all browsers except Opera (although that should work when it switches to Blink).
For Firefox and WebKit/Blink, you need to use appearance: none;, which is fairly heavy handed and removes all styling:
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
}
You can also include the prefixless version if you wish, although the appearance property is no longer in any standard. It was dropped from CSS3 Basic UI.
For IE, you can specifically style the check mark by using the -ms-check pseudo element. If you'd like to just hide the checkmark you can do the following:
input[type="checkbox"]::-ms-check {
color: transparent;
}
If you want to hide the entire element, like what appearance: none; does, you can do:
input[type="checkbox"]::-ms-check {
display: none;
}
To add the check mark back, you should use the :checked pseudo class:
input[type="checkbox"]:checked {
background-color: green;
}
Here is a demo using the latter approach. I've just set the background color when checked, but you can just as easily use an image: http://jsfiddle.net/HxqKu/3/
How can i avoid selecting a div and hide the highlight when i click in it?
I want to hide the dotted outline:
(can't get the screenshot to appear, here it is: http://i.stack.imgur.com/3OKaP.png)
it can be done with a css class .
like .if this is your div :
<div class='disableSelection'>text</div>
then apply this css .
<style>
.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}
</style>
Useoutline:none or outline:0
Check the similar one here
this worked in my case:
element {
-webkit-tap-highlight-color: transparent;
}
as per
Mozilla Docs
Add outline:0; to your div.
I usually see this problem on IE more than other browsers.
Ref here for more info:
Not sure if this is what you're looking for, but check Chris Coyers article (Removing The Dotted Outline) on this
But think about the usability issues if you don't set an alternative active state at all. But I guess Chris is mentioning this anyway.
*:focus{outline:none}
please add this code in your css file. This is css issue
Very important to add "a", to say you are adding it for a link:
<style>
.disableSelection a {
outline: 0;
}
</style>
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I am trying to write a selector like this, but to no success:
.something::after::selection
Basically I am already using ::after to inject some content, namely an image. But I want to prevent the user from being able to "select" this image and get an ugly blue back-shadow.
Normally I can prevent this with the following:
.something::selection
{
background-color: transparent;
}
But it does not seem to combine well with ::after.
Has anyone tried this before or have a solution?
No, in firefox I'm 100% sure that you can't change that effect on selected images, is system-specific, and not customizable yet
*edited
To prevent images to be selected you can use following css:
img {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Also see the updated jsfiddle.
With ::after see this jsfiddle.