I know this kind of question was asked at least 100 times but here is what I mean by CSS only:
I want to change style of checkbox/radio with CSS without beeing required to change markup of those elements ( putting them in container / adding label element etc ). I'm asking if it's possible to style <input type"checkbox"/> without adding any new html to it.
Such CSS could be added to any exisitng page and work. All solutions I've found requires some given type of markup and if you'd just add them to some page with forms it just will not work as they might not have labels or containers for inputs itself.
By modify I mean - changing style of box (main css like border-radius, colors, borders, shadows) and changing style of check (color, shape etc).
I know required markup can be added by JS - but it's not solution, it's workaround and I'm not looking for that.
it is not cross-browser solution
input[type="checkbox"]{
width: 30px;
height: 30px;
margin: 0;
padding: 0;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
}
input[type=checkbox]:after {
content: "";
width: 30px;
height: 30px;
border: 2px solid #ccc;
margin: 0;
vertical-align: top;
display: inline-block;
border-radius: 50%;
}
input[type=checkbox]:checked:after{
background: #ccc;
}
<input type="checkbox" />
Related
all. I've spent a few hours on what should be very simple before figuring out that chrome was my problem. Essentially, I'm trying to format a link of type "submit" such that it no longer looks like a button. My CSS is:
a[type="submit"]:link,
a[type="submit"]:focus,
a[type="submit"]:visited,
a[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
Text
Weirdly, it looks fine in this code snippet. However, when I run this in my project, chrome does not remove the border around the link that appears when I set the type to "submit". It does successfully change the background color to white. Things look fine when opened in firefox. Is there any way to get around this in chrome?
You seem to be getting confused between an anchor and a button
:visited and :link are CSS pseudo-classes usually used for styling an anchor element.
type="submit" is for a button element. And while type can be set on an anchor element, it will only...
specify the media type in the form of a MIME type for the linked URL. It is purely advisory, with no built-in functionality.
button[type="submit"],
button[type="submit"]:focus,
button[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
<button name="set" type="submit" value="set">Text</button>
I am trying to perform the notorious task of styling my own checkbox with pure CSS. I'm not actually against using Javascript/jQuery to get the same effect, but so far I have not found it useful. It's all working fine in the browser, I have a triangle (play) for the unchecked value, and a pause symbol for the checked. However, on phone it appears completely differently and is actually unclickable. I don't really understand why it's appearing so radically differently? Any tips would be really useful.
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #ffffff;
outline: none;
display: none;
animation: pointer 0.4s infinite;
cursor: none;
transition: opacity 0.4s;
}
input[type=checkbox]:checked {
width: 10px;
height: 11px;
border-left: 2.5px solid #fff;
border-right: 2.5px solid #fff;
border-top: none;
border-bottom: none;
}
Since browsers implement their own input stylings, the most consistent way to create your own checkbox inputs would be to hide the checkbox input with CSS, and use an HTML label tag as the checkbox instead. You can style the <label> any way you want and it will be the most consistent across browsers.
Using an HTML tag:
<input type="checkbox" id="checkbox_1" style="display:none;" />
<label for="checkbox_1" class="custom_checkbox"></label>
You can find some slick example on CodePen.io
I have a project where sometimes checkboxes don't have labels. The only way of setting custom image for checkbox I've found was setting image for label:before for corresponding label which has for value with id of checkbox.
Are there any CSS way (at least hacky) to set custom image to checkbox without changing markup? input[type="checkbox"]:before works only in Chrome.
The only way I've found that works everywhere except IE is via setting CSS appearance:
input[type="checkbox"] {
width: 16px;
height: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}
<input type="checkbox" />
I think it's impossible to do it without label for all browsers. In my opinion label is necessarily.
But you can use JS for this and one of library like icheck (and many other not only jQuery also pure JS)
Maybe if you add a container to your checkbox like this
<div>
<input type="checkbox">
</div>
and then
div{
position: relative;
/* Your custom style */
}
input{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
}
Here I have a submit button:
<input type="submit" value="submit" />
And I want to add some additional styles to make it a flat look:
input {
border: 0;
background: none;
-webkit-appearance: none;
}
This is how it looks afterwards:
However, if you look carefully, there is still some border on the top of the submit button......
Is there some way to remove the sunken or raised surface and make it a plain flat look?
You will need to set border, box-shadow and background to 0/none to remove any greyish appearance as seen on button. Then to remove the rounded corners set border-radius to 0px.
Rules are :
input[type="submit"]
/* Or better yet try giving an ID or class if possible*/
{
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
}
outline: none; would be my first guess.
And also you would probably want to remove the :focus state and :hover state as so
input[type="submit"]:focus {
background:none;
outline: none;
border:none;
}
input[type="submit"]:hover {
background: none;
border: none;
outline: none;
box-shadow: none;
}
this makes it so when it is pressed, it won't have an emphasized outline.
if it doesn't work try removing other styles such as box-shadow:none;, border-radius:none;.
I see that the button corners are rounded. Maybe this is caused by other styles that affecting it. Try to remove the border-radius like this:
input {
border: 0;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
If that didn't solve the issue, then you need to check what style that is adding the top border. You can try using CSS !important with the border declaration(not recommended btw) :
input {
border: 0 !important;
border-radius: 0;
background: none;
-webkit-appearance: none;
}
input {
border: 0 none hlsa(0,0%,0%,0);
outline: 0 none hlsa(0,0%,0%,0);
box-shadow: none;
background: none;
-webkit-appearance: none;
}
Even though outline isn't a browser default (AFAIK), in Bootstrap (if your'e using it or another simular framework) outline is applied even though it's not showing in computed style. I'm still looking for that question concerning that. Btw, I didn't add border-radius because I figure you might want rounded corners, and it shouldn't be a problem.
I need to style the text of a select box, not the list of options. When I add a padding to the select box, this is applied to the list of options, as well. Look at this image:
The icon is a pseudo-element ::before of the div. (I use a div because the select box doesn't work with pseudo-elements).
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 35px;
padding: 7px;
padding-left: 30px;
}
select::-ms-expand {
display: none;
}
.select-wrapper {
display: inline-block;
float: right;
position: relative;
}
.select-wrapper:before {
color: #ccc;
content: "\f0c9";
display: inline-block;
font: 16px "FontAwesome";
padding: 9px;
pointer-events: none;
position: absolute;
}
<div class="select-wrapper">
<select class="turnintodropdown">
<option selected="selected" value="">Menu</option>
<option value="http://localhost/wpdev/sample-page/"> Sample Page</option>
<!-- And more options... -->
</select>
</div>
I don't want that the list of options inherits the padding of the main select.
It's hard to tell without knowing the visual styles (FontAwesome?) you have applied in the picture. However, you can use the HTML option element as a CSS Selector:
.select-wrapper .turnintodropdown option {
padding: 0;
}
Alternatively, you can give all your options a class, and style them using that class as well.
Note: styling the padding property of the option element does not currently work in any browser except Firefox, although you can style things like color and background-color in all browsers, including IE11 (I don't have the ability to test older versions of IE).
A Chrome bug report exists for this, but it has been punted down the line for five years already, so I wouldn't hope for a fix soon.