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
Related
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.
I am working on a website and I finally made a responsive menu that takes up the whole screen when you click on the label. The problem is, I cannot hide it(I want to use pure css) I created a new label in the menu that tries to close the menu but it doesn't work and I am assuming that it's because a child is trying to select a parent. I am new to CSS and would really appreciate any help on how to make a close button that closes the menu(width: 0%). Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
html,
body,
figure {
padding: 0;
margin: 0;
list-style: none;
}
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle2:checked < #myNav{
width: 0%;
}
#toggle:checked + #myNav{
width: 100%;
}
Unfortunately in CSS you cant go up the parent level.
But you can do this in Pure CSS.
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle:checked + #myNav{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle">☰</label>
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
As you can see I've removed one of the input fields (one inside the nav) and then changed the id of the for attribute inside the nav to point to the checkbox outside the nav making use of the selector
#toggle:checked + #myNav
What you want to affect is the overlay class but i do not believe you are able to do this with CSS.
You could do this with JQuery.
However, you can modify your current code so that the original toggle is still visible in the overlay and therefore when you untick that toggle, the overlay is removed.
So, in the html remove these two lines:
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
In your CSS change the 'top' to relative:
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: relative;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
Give that a try otherwise, I would recommend you look into JQuery and the hide function
I would also encourage checking out Bootstrap at some point once you are comfortable with CSS since it is a great framework for mobile-first design.
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
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
}