I do want to style a checkbox like this
White color border, White color tick mark, and dark blue (#283550) for the background.
I tried this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.watchlist {
outline: 2px solid white;
background-color: #283550;
}
.wrapper {
padding: 3rem;
background-color: #283550;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="checkbox" class="watchlist">
</div>
</body>
</html>
adding the white border was successful. But still, I can see a grey color border inside and also unable to fill the background with dark blue color.
How do I achieve this to work in any modern web browser?
Overriding the appearance property of checkbox a will result in a completely customized appearance.
Also use the :before & :after pseudo to style the checkbox tick element on :checked property.
Note: Use vendor prefix for wider browser support. (Firefox, Safari, etc.)
body {
background: #283550;
}
/* custom checkbox */
.custom-checkbox {
height: 23px;
width: 23px;
margin: 0;
padding: 0;
opacity: 1;
appearance: none;
border: 2px solid #FFF;
border-radius: 3px;
background: #283550;
position: relative;
margin-right: 10px;
}
.custom-checkbox:checked {
border: 2px solid #FFF;
}
.custom-checkbox:checked:before,
.custom-checkbox:checked:after {
content: "";
position: absolute;
height: 2px;
background: #fff;
}
.custom-checkbox:checked:before {
width: 6px;
top: 11px;
left: 3px;
transform: rotate(44deg);
}
.custom-checkbox:checked:after {
width: 12px;
top: 8px;
left: 5px;
transform: rotate(-55deg);
}
.custom-checkbox:focus {
outline: none;
}
<input class="custom-checkbox" type="checkbox" name="check" checked>
You can achieve this by using Bootstrap 5 Checkbox, and update your HTML code with the following code
<div class="wrapper">
<div class="form-check">
<input class="form-check-input watchlist" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</div>
and your CSS with following code
.watchlist {
outline: 2px solid white;
background-color: white;
}
.wrapper {
padding: 3rem;
background-color: #283550;
color: white;
}
.form-check-input:checked{
background-color: #283550;
border-color: #283550;
}
Enjoy!
The checkbox you're using is the default Firefox design. It'll look different on other browsers so I'd suggest you stick to Bootstrap buttons.
To change the color of the bootstrap button, read this answer.
Related
I currently achieve the look of the first image here by applying border-collapse: separate to the table and border-right: dashed 1px #dddddd as well as position: sticky and left: 0 to the td:
When scrolling horizontally, is there a pure CSS way of making a shadow appear as follows:
There is no pure CSS way to detect a position: sticky element. But there is a way to detect it with JS and interact with any element on it.
var observer = new IntersectionObserver(function(entries) {
if(entries[0].intersectionRatio === 0)
document.querySelector("#nav-container").classList.add("nav-container-sticky");
else if(entries[0].intersectionRatio === 1)
document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });
observer.observe(document.querySelector("#nav-container-top"));
body {
margin: 0px;
font-family: Roboto, Tahoma;
}
#logo-container {
background-color: #bdc3c7;
height: 100px;
}
#nav-container-top {
background-color: #bdc3c7;
height: 1px;
}
#nav-container {
background-color: #2980b9;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
font-size: 25px;
position: sticky;
top: 0;
font-weight: 700;
transition: font-size 0.2s ease-out;
}
.nav-container-sticky {
background-color: #e74c3c !important;
font-size: 18px !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
#main-container {
background-color: #ecf0f1;
height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo-container"></div>
<div id="nav-container-top"></div>
<div id="nav-container">Navigation Container</div>
<div id="main-container"></div>
</body>
</html>
Took manual from here https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky
I am trying to create some Radio Buttons and Check Boxes that use CSS for styling and hide them. But i am running into being able to position them. I can get the buttons and boxes to disappear and change the look depending on being activated or not, but when i go to place them for example 100px from left and 100px down they dont move they stay in line.
#charset "utf-8";
/* CSS Document */
#COM1TX {
left:200px;
top:500px;
position:relative
}
#COMRX {
left: 0px;
top: 100x;
position: absolute;
cursor: crosshair;
}
.radios .radio{
display: inline-block;
background-color: #000000;
color: #FFFFFF;
left: 200px;
top: 500px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.radios input[type=radio]{
display:none;
}
.radios input[type=radio]:checked + .radio{
background-color: #ffffff;
color: #000000;
line-height: 100px;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="TEST2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="radios">
<input type="radio" name="COMTX" id="COM1TX">
<label class="radio" for="COM1TX">COM 1 Tx</label>
</div>
<div>
<input type="checkbox" name="COMRX" id="COMRX">
<label for="COMRX">COM 1,2 Rx</label>
</div>
<div class="radios">
<input type="radio" name="COMTX" id="COM2TX">
<label class="radio" for="COM2TX">COM 2 Tx</label>
</div>
</body>
</html>
use position: relative here and you will be able to move them wherever you want
.radios .radio{
position: relative;
display: block;
background-color: #000000;
color: #FFFFFF;
left: 200px;
top: 8px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
Live Demo
I'm creating a custom dropdown using the method from this site: http://bavotasan.com/2011/style-select-box-using-only-css/
HTML
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
There is also a working example in the link. So it works perfectly. However, when the text of my options is really long, it is overlapping with the dropdown.
Here is a link to JSFiddle: http://jsfiddle.net/APNB6/ to illustrate the problem
Is there a workaround to that?
Thanks,
Tee
Maybe you could try adding something like this to you .styled-select select
.styled-select select{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 238px;
padding-right:30px;
}
This will hide the overlapping text, I would also make select a bit smaller, or give it right padding so the text doesn't go over the down arrow.
http://jsfiddle.net/Q687L/2/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
* {
outline:none;
}
select::-ms-expand {
appearance: none;
display:none;
background:#fff;
}
select {
-webkit-appearance: none;
appearance: none;
border:none;
}
/*select box apparance*/
#-moz-document url-prefix() {
.styled-select select {
width:110% !important;
}
}
.styled-select select {
width:100%;
background:transparent;
height:30px;
padding:0 30px 0 0;
}
.styled-select {
border:1px solid #ccc inset;
width:200px;
overflow:hidden;
background: url(down_arrow_select.jpg) no-repeat right #ddd;
}
</style>
<body>
<div class="styled-select">
<select>
<option>Here is the first option Heren inder </option>
<option>The second option</option>
</select>
</div>
</body>
</html>
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.
I'm trying to style an input type file with an image. so far, so good, but now I want to set the height of that button on 40px. The problem is that, somehow, this button has a fixed height and even when i put !important next to the 40px of the size, the button still shows the original height. can somebody help me with this? thank you
here it is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="main.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
and the css:
.file_input_textbox
{
float: left;
background: none repeat scroll 0 0 #FF554B;
border: medium none;
color: #FFFEFA;
font-family: 'InterstateBold';
font-size: 11px;
margin: 0;
padding: 12px 15px;
width: 647px;
}
.file_input_div
{
position: relative;
width: 100px;
height: 23px;
overflow: hidden;
}
.file_input_button
{
position: absolute;
top: 0px;
background:url(btn-newsletter.jpg) no-repeat;
color: #FFFFFF;
border-style: none;
width:40px;
height:40px !important;
}
.file_input_button:hover
{
background:url(btn-newsletter2.jpg) no-repeat !important;
}
.file_input_hidden
{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
I figured i out. As an input type="file" and input type="button" don't let me change the height, i change this line: <input type="button" value="" class="file_input_button" />
to this: <a href="#" class="file_input_button" /> and change the css to:
.file_input_div
{
position: relative;
width: 100px;
height: 38px;
overflow: hidden;
}
thank you, anyway.
The correct css syntax however, no matter if it lets you style the height or not (I don't know).
Is:
input[type=file] {
//your style rules
}