I made a scheme for step-by-step instruction. Eventually there will be many options, buttons, way.. But at the moment I'm try to paint red the buttons that are inactive. But css is connected to the "class". How do you make an "id" that has the higher priority than the "class" used for text Formating?
JSFiddle
<input type="button" name="coughyes" class="next action-button" id="red" value="Yes" />
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#red {
background-color: red;
}
You can use the same selector and append your ID.
#msform .action-button#red {
background-color: red;
}
Though you should use a class since you can only use an ID on the page once. Update your HTML and CSS to...
<input type="button" name="coughyes" class="red next action-button" value="Yes">
<input type="button" name="coughno" class="red next action-button" value="No">
#msform .action-button.red {
background-color: red;
}
Updated your fiddle http://jsfiddle.net/1x183c2t/3/
Or if you wanted to keep the same markup, you could simply change background-color: red; to background-color: red !important;.
Related
I'm having a problem with modifying labels that belong to a specific input.
Modifying a later div when the appropriate input - checkbox is checked works without problems. But if I try to use the smae method for the labels it fails. Additionally if I put an additional div around a label and try to access this instead of the label (on a checked for the appropriate input) it also fails to do anything.
My Question here is mostly what am I doing wrong there?
HTML
<input type="radio" id="TabOne" class="sheet-TabOne" name="Tab" checked="checked" />
<input type="radio" id="TabTwo" class="sheet-TabTwo" name="Tab" />
<div class="sheet-TabHeader">
<label for="TabOne" class="sheet-TabOne">One</label>
<label for="TabTwo" class="sheet-TabTwo">Two</label>
</div>
<div class="sheet-TabContent sheet-TabOne">
First content
</div>
<div class="sheet-TabContent sheet-TabTwo">
Second content
</div>
CSS:
label.sheet-TabHeader {
float: left;
width: auto;
border: 2px solid #A52A2A;
width: 150px;
height: 20px;
font-size: 18px;
background: #fff;
color: black;
}
input.sheet-TabOne:checked ~ label.sheet-TabOne,
input.sheet-TabTwo:checked ~ label.sheet-TabTwo
{
background: black;
color: red
text-shadow: 0px 0px 5px black,0px 0px 5px black,0px 0px 5px black;
}
div.sheet-TabContent {
display: none;
clear: left;
}
input.sheet-TabOne,
input.sheet-TabTwo
{
display: none;
}
input.sheet-TabOne:checked ~ div.sheet-TabOne,
input.sheet-TabTwo:checked ~ div.sheet-TabTwo
{
display: block;
}
AFAIU, label tag is for input tag only. You can't use it with a div tag. And it links by the input id. You're trying to link them to a div without any id.
I have a working show/hide in CSS, using the radio type. All is good but when I try to add more then one show/hide they all open at the same time.
That makes sense to me, since they have the same ids and names. So I edited those, all is different, but when they go on the same page they lose the formatting and a mess comes out of it.
Any advice is appreciated (unless your advice is using js or jquery: I know it's easy with js but I really want to use css/html only)
Thanks!
/* showhide css */
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
float: left;
padding-top:20px;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
/* showhide css 01 */
input#show01, input#hide01 {
display:none;
}
div#paragraph01 {
display:none;
}
input#show01:checked ~ div#paragraph01 {
display:block;
float: left;
padding-top:20px;
}
input#hide01:checked ~ div#paragraph01 {
display:none;
}
.showthis01 {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 200px;
font-size: 15px
}
.hidethis01 {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
font-size:13px;
}
<label for="show">
<span class="showthis">[Show]</span></label><input type=radio id="show" name="group"/><label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group"/>
<div id="paragraph">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>
<br /><br /><br /> <br />
<label for="show01">
<span class="showthis01">[Show01]</span></label><input type=radio id="show01" name="group01"/><label for="hide01"><span class="hidethis01">[Hide01]</span></label>
<input type=radio id="hide01" name="group01"/>
<div id="paragraph01">
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
</div>
The idea is to use next selector + for show/hide a single item and use sibling ~ for all.
DEMO: http://jsfiddle.net/qjsmm6eq/3/
HTML
<label for="all">show all</label>
<input type="radio" name="radio" class="showall"/>
<label for="all">hide all</label>
<input type="radio" name="radio" class="hideall" />
<br/><br/><br/><br/>
<label for="a">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">a</div>
<br/><br/>
<label for="b">show/hide</label>
<input type="radio" name="radio" class="single" />
<div class="content">b</div>
CSS
.content {
visibility: hidden;
color: red;
}
.single:checked + .content {
visibility: visible;
}
.showall:checked ~ .content {
visibility: visible;
}
.hideall:checked ~ .content {
visibility: hidden;
}
EDIT: The checkbox solution is available here http://jsfiddle.net/qjsmm6eq/
EDIT 2: Changed back to radio, show/hide all on two buttons, and one for single item, the best I can do for now.
I followed the idea of sdcr (thank you very much!) and used checkboxes: they worked great, so even though is not a proper answer since my original question was different I paste the code anyway:
/* Showhide CSS only */
/* function */
label {
cursor: pointer;
}
#showhide {
display: none; /* hide the checkbox */
}
#paragraph {
display: none;
}
#showhide:checked + #paragraph {
display: block;
}
/* Showhide CSS only 02*/
label {
cursor: pointer;
}
#showhide01 {
display: none; /* hide the checkbox */
}
#paragraph01 {
display: none;
}
#showhide01:checked + #paragraph01 {
display: block;
}
<label for="showhide"><span class="title">I am the first</span></label>
<input type="checkbox" id="showhide"/>
<div id="paragraph">
original text
</div>
<br /> <br />
<label for="showhide01"><span class="title">I am the second</span></label>
<input type="checkbox" id="showhide01"/>
<div id="paragraph01">
secondary text
</div>
check out this JSFiddle
I want to apply different style to second button. I guess there is just a different sytax. Help.
<input type="button">
<input type="button" class="button2">
I dont want to use id, beacause it's to be used for some other purpose.
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
You can specificity the css selector using 'has' class add apply the rule to input button elements with class .button2:
input[type="button"] {
width: 500px;
background: red;
}
[type='button'].button2 {
width: 100px;
background: black;
}
<input type="button">
<input type="button" class="button2">
Also take a look Specificity.
<input type="button">
<input type="button" class="button2">
input[type="button"]{
width: 500px;
background: red;
}
input[type="button"].button2{
width: 100px;
background: black;
}
Fiddle: http://jsfiddle.net/0dyk2n3b/1/
Check this
http://jsfiddle.net/0dyk2n3b/2/
input.button2{
width: 100px;
background: black;
}
Slight variation on Arvind's answer, but without use of important:
input[type="button"] {
width: 500px;
background: red;
}
input[type="button"].button2 {
width: 100px;
background: black ;
}
<input type="button">
<input type="button" class="button2">
Yes, you can do this.
jsFiddle: http://jsfiddle.net/swapnilmotewar/0dyk2n3b/4/
HTML:
<input type="button">
<input type="button" class="button2">
CSS:
input[type="button"]{
width: 500px;
background: red;
}
input[type="button"].button2{
width: 100px;
background: green;
}
How to cancel the blur effect of the HTML textbox when focus on it?
<input type='text' style="background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; "></input>
You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.
http://jsfiddle.net/qfr8eng1/1/
HTML:
<input type="text" id="noeffect" value="look at me!"/>
CSS:
#noeffect
{
background-color: #33ccff;
color: #AD8C08;
border: 1px solid #ffffff;
}
#noeffect:focus
{
outline: none;
}
try it......
.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }
<input type='text' class="onfocus"></input>
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}