i'm writing a page for a mobile version of a website and i'd like to insert a checkbox with label Dark Theme, when an user check this box change background color (of entire website) to black and text color to white, i found many part of codes in internet but it doesn't works, i don't know why.
For Example i tried this:
#select1:checked ~ div .wrapper{
background-color:black;
color: white;
}
<div class="wrapper">
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
</div>
Can you help me?
Thank you
this code is the example of Change background Color
<div id= "genre">
What do you bust a move to?
<br>
<br>
<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Doo
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
<br>
</form>
</div>
function changeColour(value)
{
var color = document.body.style.backgroundColor;
switch(value)
{
case 'b':
color = "#FF0000";
break;
case 'r':
color = "#0000FF";
break;
case 'p':
color = "#FF00FF";
break;
}
document.body.style.backgroundColor = color;
}
Jsfiddle
Change div background color by using css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrapper{
width:50px;
height:50px;
background-color:#000;
}
#select2:checked ~ .wrapper{
background-color:#060;
}
#select3:checked ~ .wrapper{
background-color:#0000FF;
}
</style>
</head>
<body>
<input id="select1" name="check1" type="checkbox" checked />
<label for="select1">Dark Theme</label>
<input id="select2" name="check1" type="checkbox" />
<label for="select2">Green Theme</label>
<input id="select3" name="check1" type="checkbox" />
<label for="select3">Blue Theme</label>
<div class="wrapper"></div>
</body>
</html>
The only way you can get it through pure CSS is the following snippet:
#select1:checked~div.wrapper {
background-color: black;
color: white;
}
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
<div class="wrapper">
Some text here
</div>
NOTE: Using JS is the correct way to achieve what you are expecting.
Related
I have a problem with <input>. I want to check whether the user has filled it out or not.
By default, the input border will be gray. When the user did not fill in the fields it will have a red border otherwise green.
I added two CSS codes:
input:not(:focus):not(:placeholder-shown):invalid {
border-color: red;
}
input:not(:focus):not(:placeholder-shown):valid {
border-color: green;
}
In <input> where I added required, the border is red, and here where I don't have required, the border is green. Can I change it somehow?
These are default fields that are not required.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form name="companies" method="post" class="default_ajax was-validated" enctype="multipart/form-data">
<div class="input-field-group">
<input type="text" placeholder="Place #1" id="company_name" name="company_name" class="enable_character_count form-control" required>
<label class="company-label">Input 1</label>
</div>
<div class="input-field-group">
<input type="text" placeholder="Place #2" id="company_service_name_1" name="company_service_name_1" class="enable_character_count form-control"/>
<label class="company-label">Input 2 </label>
</div>
</form>
i want to override the semantic ui css for disabled checkbox, since i'm not good at css i don't which role i should override.
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<div class="ui disabled checkbox">
<input type="checkbox" disabled="disabled">
<label>Disabled</label>
</div>
<div class="ui disabled checkbox">
<input type="checkbox" disabled="disabled">
<label></label>
</div>
From the snippet above it seems that they are styling the label. How can i set the box of checkbox color to something like grey or any darker color?
input[type="checkbox"]:disabled + label::before{
background: gray;
}
input[type="checkbox"]:disabled + label:hover::before{
background: gray;
border: 1px solid #d4d4d5;
}
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui disabled checkbox">
<input type="checkbox" disabled="disabled">
<label>Disabled</label>
</div>
<br/>
<div class="ui disabled checkbox">
<input type="checkbox">
<label>Abled</label>
</div>
I try to style a video controls.
I want two radio buttons for fast forward / rewind.
<input name="group1" type="radio" id="ff" />
<label for="ff"><i class="material-icons">fast_forward</i></label>
<input name="group1" type="radio" id="fr" />
<label for="fr"><i class="material-icons">fast_rewind</i></label>
How can I style them to appear as buttons with pressed state for the selected radio button?
This is a basic sample you can tweak to suit your needs
#help label {
float:left;
width:120px;
margin:0px;
background-color:#FFF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#help label span {
text-align:center;
font-size: 16px;
padding:10px 0px;
display:block;
}
#help label input {
position:absolute;
top:-20px;
}
#help input:checked + span {
background-color:indigo;
color:white;
}
#help .white {
background-color:#FFFFFF;
color:#000;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<div id="help" class="row halign">
<label class="white">
<input type="radio" name="unemployment">
<span>I</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>need</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>a</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>job</span>
</label>
</div>
</body>
</html>
I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.
Here is my simple code so far:
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
Here is the CSS I have:
input[type=text] {
border: 1px solid #D4E2F1;
}
input[type=date] {
border: 1px solid #D4E2F1;
}
input[type=color] {
border: 1px solid #D4E2F1;
}
I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.
Your help would be greatly appreciated.
Thanks.
AJ
Try this:
HTML:
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS:
.user-form { padding:20px; }
.user-form .field { padding: 4px; margin:1px; background: #eee; }
.user-form .field label { display:inline-block; width:120px; margin-left:5px; }
.user-form .field input { display:inline-block; }
jsFiddle: http://jsfiddle.net/VuSX4/
Try this
HTML:
<
div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;"
>
Put your form markup in here
<
/div>
I looked all over for this answer and found the information at W3C Schools and a bit of trial and error
This validates at http://validator.w3.org/
Here is the code: jsFiddle
It looks properly in Chrome (radiobuttons are OK although 3 of 6 radiobuttons are left to the left border of browser), but looks completely different in Firefox (the radiobuttons in Firefox are messed).
How to fix the problem with css styles? The styles are taken from twitter bootstrap so they could be overrided only.
Also, html can't be touched if possible, only css.
Is that a crossbrowser bug? What's the reason it looks completely different?
The full code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
label
{
display : block;
margin-bottom : 5px
}
.radio input[type="radio"], .checkbox input[type="checkbox"]
{
float : left;
margin-left : -18px
}
</style>
</head>
<body>
<div style="border:1px solid red; ">
<label class="radio">
<input name="count" value="A" type="radio">
A </label>
<label class="radio">
<input name="count" value="B" type="radio">
B </label>
<label class="radio" style="border:1px solid blue;">
<input name="count" value="C" type="radio">
C </label>
</div>
<div style="margin-left: 300px; margin-top: -70px;">
<label class="radio">
<input name="count2" value="D" type="radio">
D </label>
<label class="radio">
<input name="count2" value="E" type="radio">
E </label>
<label class="radio">
<input name="count2" value="F" type="radio">
F </label>
</div>
</body>
</html>
The problem is your float.
Remove the float left from
.radio input[type="radio"], .checkbox input[type="checkbox"]
If I understand you correctly, float and margin-left are being set by bootstrap to values that you don't want.
In order to override them all you need to do is add styles to your page (or preferably a bootstrap override css file, i.e. one added after you have added bootstrap) that will override the bootstrap values you don't want e.g.
.radio input[type="radio"], .checkbox input[type="checkbox"]
{
float : none;
margin-left : 0px
}