Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
Related
I have the following css in my app that makes my checkboxes much more gray. This solution will not work in IE 11. How can I fix this?
input[type=checkbox][disabled] {
filter: invert(25%);
}
The filter css property is not supported by IE, even with -ms prefix. You can read about this at the MDN. So short answer: It is not possible to achieve this with the filter Property in IE.
You could try to write a workaround using the :before pseudo selector, like in the quick example below. I used a label while hiding the actual checkbox. Please note, that the appearance of checkboxes depend on the browser, so this "fake" checkbox may looks different than other enabled checkboxes, so I would recommend you to also style these! It is more work to do, but this is a workaround, not a solution ;)
input[type=checkbox][disabled] {
display: none;
}
input[type=checkbox][disabled] + label:before {
content: " ";
display: inline-block;
height: 12px;
width: 12px;
background: rgba(0,0,0,0.25);
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 5px;
}
input[type=checkbox][disabled] + label {
color: #aaa;
}
<input type="checkbox" id="1" disabled/>
<label for="1">Disabled</label>
If you actually want to know how to make custom checkboxes with CSS, you may want to take a look at this SO post, which already delivers a great answer to this problem :-)
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
Firefox, since version 23, natively supports the <input type="range"> element, but I couldn’t figure out how to remove the dotted outline. The following CSS has no effect:
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}
Does anyone have any idea how to fix this issue in Firefox?
Example: https://jsfiddle.net/pF37g/
Unfortunately, you can't! (update; you now can)
It's a bug in Firefox and there is no work-around to fix this besides from fixing the source base itself (see below).
Also see Jonathan Watt's blog (who is working on this):
Known issues:
the default CSS styled appearance still needs work, and native theming (giving the slider the appearance of the operating system's
theme) is still to come ...
In a reply to a comment in his blog about this very same issue he states:
Right now you can't - sorry. I've filed bug 932410 to make that
possible.
At the moment of writing there appear to be no progress on this and it's not known when a official fix will be available.
Update
Since this answer was posted the bug has been fixed. You can now use (as stated in other answers, but I include it here for completeness):
input[type=range]::-moz-focus-outer {
border: 0;
}
It can be done with new version of Firefox. As stated here, this bug is fixed. So it is possible to hide outer dotted border. To do so, set ::-moz-focus-outer's border to 0, like this:
input[type=range]::-moz-focus-outer {
border: 0;
}
Here is working example: http://jsfiddle.net/n2dsc/1/
In webkit browsers outer line will appear if -webkit-appearance: none; is set. To remove it, just set :focus's outline to none, like this:
input[type=range]:focus {
outline: none;
}
Here is working example: http://jsfiddle.net/8b5Mm/1/
As Ken already pointed out, there is no way to remove the outline. However, there is a work-around to "hide" the outline if you know the background-color of the parent element. Assuming a white background the following CSS would hide the dotted outline:
input[type=range] {
border: 1px solid white;
outline: 2px solid white;
outline-offset: -1px;
}
Your updated example: http://jsfiddle.net/9fVdd/15/
If you can settle for a wrapping element (it's likely you already have a wrapping LI or P), you can use FireFox-only CSS to position the input out of view and reposition the track/thumb in view.
Note 1 - don't try to use translateX - I think FireFox uses that to actually slide the thumb - so stick with translateY
Note 2 - Be sure to test with keyboard navigation. You should only move the input by the smallest amount possible to get the dotted lines out of sight. If you position it waaay far away (translateY(-1000em)) - then you will break usability for keyboard navigation.
Here ya go:
HTML
<span class="range-wrap"><input type="range" /></span>
CSS
.range-wrap {
overflow: hidden;
}
input[type='range'] {
-moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
-moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
-moz-transform: translateY(3em);
}
http://jsfiddle.net/pF37g/98/
Dotted outline is not an issue, it's browser's way to show the input element is selected. What you can do is set tabIndex to -1 which will prevent your input element from taking focus on tab and, consequently, from having the outline:
<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>
But after doing this you will lose some keyboard accessibility. It is better to have input element keyboard accessible.
Here is the fiddle: http://jsfiddle.net/pF37g/14/
If any custom styling is applied to input[type='range'] then Firefox use a different model (beta) to render the range input.
You can see the 2 different models here:
http://jsfiddle.net/pF37g/75/
Currently I do not believe it is currently possible to have a custom CSS styled input range box in Firefox to adhere to outline: 0; as of Firefox 27.0
To make it complete: The Bug has been fixed and now it's working with:
input[type=range]::-moz-focus-outer { border: 0; }
to remove all outlines from all input-tags use:
input::-moz-focus-inner, input::-moz-focus-outer { border: none; }
source: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7
You can not. It seams to be a bug in Firefox.
It makes two outlines for the range element. One you can influence by css setting and a second, which is resistant against any manipulation.
I set the outline visible to show the issues:
input[type='range']:focus {
outline: 5px solid green;
}
Here you can see it:
http://jsfiddle.net/pF37g/97/
I have little research in config section of mozilla add this too
:-moz-any-link:focus {
outline: none;
}
a, a:active, a:visited, a:hover {
outline: 0;
}
then
:focus {
outline: none;
}
then
::-moz-focus-inner {
border: 0;
}
Here comes the solution
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
Ive been handed a design that has a particular header with style the type knocking out a rule like:
------ Text Content ------
Ive done this a couple times over the years but i was never happy with my solution. Usually it involved using numerous elements. Since these are headers id like to keep the markup as lean as possible.
My first thought this time around was to use box collapsing to my advantage: http://jsfiddle.net/cEcCL/
However there a are few problems here:
This relies on setting the background of the span to something opaque in order to knockout the line. Problem is most of these will probably be in the upper portion of the page where the gradient background hasnt yet faded to its solid
Actually i wasnt aware of this till i made the fiddle - the text seems slightly off center, not sure why that is.
While it can probably be managed, Im worried about the robustness of the vertical offsets to center the line on the median of the text line-box.. What if i have long header that goes to 2 lines?
Does anyone have any other ideas?
Here's a very quick example that uses a single h2 and the before/after pseudo elements.
h2:before, h2:after {
content:' '; display:inline-block;
height:0; width:100px;
border-top:1px solid black;
vertical-align:middle;
margin:0 1em
}
Obviously, there are some drawbacks:
No IE6/7 support
As it stands, you have to explicitly declare a width for the lines (but you might be able to mess with this)
Doesn't handle multiple lines too well, but again, you might be able to edit the h2 styles to make this work a little better
While not a perfect solution (I feel your pain here, this is a tough one), sometimes you can use background-attachment:fixed to remedy the background issue using the <span> technique if you are using a background image:
Demo: http://jsfiddle.net/cEcCL/3/
<h2><span>Text Content</span></h2>
h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
background:url(background.gif) fixed;
}
h2 {
line-height: 10px;
font-size: 18px;
text-align: center;
padding: 5px 0;
}
h2:after{
content:" ";
float:left;
border-bottom: 1px solid #000;
width:100%;
height:10px;
margin-top:-15px;
}
Of course this only works if the parent element can have a fixed background image, and won't work with CSS3 gradient backgrounds. It's a limited-use idea, but I just thought I'd bring it to light.
It seems only <legend> tags have this behavior, and I know of no way to emulate that with CSS, and I don't think you don't want to start using <legends> for headings...
I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).