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;
}
Related
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;.
I was looking for a way to display the value of an
<input type="submit">
on 2 lines, so potentially add a line break in it, but i tried multiple stuff such as :
<br>
\r\n
\n
The result should be like this (On the right side of the picture) :
Nothing works. Anyone got a clue on this ?
Add this to your css:
A white-space property will allow to have input in multiple lines
input[type="submit"] {
white-space: normal;
width: 150px;
float:right;
text-align: right;
}
<input type="submit" value="J'essaie gratuitement 30 jours" />
Two other methods are
<button type="submit">Multiple line<br/>input</button>
and
using
carriage return in between the input value as:
<input type="button" value="Multiple line
input" style="text-align:center;">
The last method however doesn't work in IE10
Use button instead of input:
.right-aligned {
text-align: right;
}
<button type="submit" class="right-aligned">Text <br /> broken </button>
Buttons can accept a variety of other tags inside, such as <br />, <span>.
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).
I think you try this in HTML:
Just as example help for you:
<input type="button" value="Really
Tall
Button">
This is working for me:
div.full {
width:500px;
background-color:grey;
}
div.left {
float:left;
width:60%
}
button {
width:40%;
text-align:right;
cursor:pointer;
}
div.underline {
width:100%;
}
<div class='full'>
<div class='left'>
there is a part of text
</div>
<button>J'essaie gratuitement
<div class='underline'>30 jours</div>
</button>
</div>
I just added some CSS to keep the size of the button. and line breaks are not a very good practice. You'd better do it with css.
Alternatively, use a standard <a> or <span> tag.
var submits = document.getElementsByClassName('submit');
for (var i = 0; i < submits.length; i++) {
submits[i].addEventListener('click', function() {
alert('submit!');
document.getElementById('form_to_submit').submit();
});
}
.submit {
text-decoration: inherit;
color: inherit;
display: inline-block;
border: 1px solid #222;
border-radius: 2px;
padding: 2px 4px;
background: #eee;
cursor:pointer;
text-align:right;
}
<p>J'essaie gratuitement<br>30 jours</p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>
I have 20 inputs in a page that are styled as buttons using the class property (that is, in the css I define borders, padding, width, etc).
But I want each one to have a different background color. In my current CSS I have 20 classes (one for each input) which are copies of all the style properties except for background-color.
It is working OK like this, but I feel somewhat uncomfortable repeting code. In there a very simple way to define most of the properties for all inputs (borders, padding, width...) and then specify the background-color, one for each input?
HTML
<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">
CSS
.btn{
border:1px solid grey;
width:50px;
height:10px;
padding:10px;
margin: 10px;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.black{
background-color:black;
color:white;
}
.orange{
background-color:orange;
}
Here is the fiddle
You can use multiple classes on elements and use a common class on the elements for the shared styles and then a different class (or id) for the custom styles specific to that element.
e.g.
HTML
<input type="text" class="input-class red" />
<input type="text" class="input-class green" />
CSS
.input-class {
margin: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
You could use a different selector to target all text inputs rather than having a common class aswell:
input[type="text"] {
margin: 0;
}
As well as the above, you can create more specific selectors like:
.input-class.red {
background-color: red;
}
.input-class.green {
background-color: green;
}
input[type="text"].red {
background-color: red;
}
input[type="text"].input-class.red {
background-color: red;
}
Which will only target elements that match those selectors, situations where this might be useful is when you might have a class with the same name elsewhere that you don't want to be affected.
For example you might have already:
.red {
color: red
}
So you don't want an input with red text on a red background so you can chain the class selectors together to be more specific.
Like your "subclass":
.class {
/* for <elem class="class"> only */
}
.class.subclass {
/* for <elem class="class subclass"> only */
}
Is there a very simple way to define most of the properties for all
inputs (borders, padding, width...) and then specify the
background-color, one for each input?
Firstly, define the styling for all inputs, e.g. (or use a shared class etc):
input{
border:...
padding:...
}
Then, if the inputs are all children of the same top level parent, you can isolate specific ones using the :nth-of-type selector:
input:nth-of-type(1){
background-color:red;
}
input:nth-of-type(2){
background-color:blue;
}
Alternatively, provide each with a relevant class designation
There is not in native CSS, but you have other ways of doing this at your disposal:
You can define a common class that holds all of the style that are common across the inputs:
.my-inputs {
border 1px solid #ccc;
padding: 15px;
}
and then you can modify that as needed
.my-inputs.city {
width: 100px;
}
.my-inputs.state {
width: 50px;
}
So that in your markup, you can do things like this:
<input type="text" class="my-inputs state">
Another way you can do this is to use a CSS preprocessor which does afford you the ability to do class inheritance. Take a look at the documentation for LESS and SASS:
http://lesscss.org/
http://sass-lang.com/
I'm making mock up site to learn. But my css on Buttons don't work, I can put any css and their appearance doesn't change.
HTML:
<div id="bottom">
<form method="get">
<button class="sButtons" type="submit" name="gSearch">Google Search</button>
<button class="sButtons" type="submit" name="gLucky">I'm Feeling Lucky!</button>
</div>
And the CSS
#sButtons{
overflow: visible;
padding: 0 7px;
width: 100px;
color: #ffffff;
background-color:black;
}
(I just put very random values into it just to see if there's a difference)
here's a link to the rest of my code https://gist.github.com/Bitvala/4c0600c03c3a215fd023
In CSS the Class selector is defined with a dot like so:
.Divclass{
position:absolute;
}
And the ID Selector is used with a #, like so:
#DivID{
position:absolute;
}
What you want to do is:
.sButtons{
overflow: visible;
padding: 0 7px;
width: 100px;
color: #ffffff;
background-color:black;
}
change #sButtons to .sButtons
or class to id
I have a button with the following code, but the CSS below is not working
i.e. the color and size is not changing
CSS:
.btn-default .act-buttons{
background-color: black!important;
color: white!important;
height: 28px;
width: 28px;
}
HTML:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
</div>
</div>
Given your most recent html...
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
</div>
</div>
Try this css (note the lack of a space in .btn-default.act-buttons):
.btn-default.act-buttons{
background-color: black!important;
color: white!important;
height: 28px;
width: 28px;
}
This will target any element with both classes btn-default and act-buttons
.btn-default .act-buttons would target a parent element with the class btn-default which contains a child element with the class act-buttons
.btn-default,.act-buttons would target any element with either of the classes btn-default or act-buttons
your css is targeting any class named act-buttons which is inside an element which has a class btn-default
you could change it to
.btn-default, .act-buttons{...}
or
.btn-default.act-buttons{...} // no space between classes
#KyleMit's is the answer you'll learn the most from, and specifically, you want to pay attention to his note on the And Selector:"btn-default.act-buttons will find any elements that match both class selectors, meaning any element that has class="btn-default act-buttons"
So, using the And Selector, you should use
.btn-default.act-buttons{
background-color: black;
color: white;
like here: http://www.bootply.com/bFjCr8eQlY
ps - your height and width will need it's own fixing unless what you put in the button is exactly the right size, but that's another issue.
Overview of CSS Selectors:
First things first, make sure you're using the right selector:
Descendant selector: .btn-default .act-buttons
Will find any elements with the class act-buttons that are descendants of an element with the class btn-default
And Selector: .btn-default.act-buttons
Will find any elements that match both class selectors, meaning any element that has class="btn-default act-buttons"
Or Selector: .btn-default, act-buttons
Will find any elements that either have a class of btn-default or a class of act-buttons
Also, check that...
The html element has access to the selector
You've applied your custom styles after the bootstrap style sheet
You should always try to override standard styles with your own
then you don't need !important
Finally, make sure you're using act-buttons or action-buttons consistently
Here's a working demo in Fiddle
.btn.act-buttons{
background-color: rgb(0,0,0);
color: white;
width: 100px;
}
Screenshot:
well try this
<div class="form">
<input class="field button2" id="submit" type="button" value="Save"/>
</div>
and in your css
.button {
background-color: #FFFFFF;
padding: 2px 4px;
font: 13px sans-serif;
text-decoration: none;
border: 1px solid #000;
color: #000
}
.button:hover { background-color: #46000D; }
input.button2 {
background-color: #000000;
color: #ffffff
}
input.button2:hover { background-color: #ffffff; color: #000000; }
it will look better, i hope i helped you :-D