Is there a simple way to prevent using a style when the class is 'chatInput'.
Example HTML:
<input type="button" value="hello" class="chatInput"/>
And CSS something like:
input[type=button&class!=chatInput], input[type=submit&class!=chatInput]{
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
Thanks
You can use the :not selector:
input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput)
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
In CSS3, you can use the :not() selector:
input[type=button]:not(.chatInput), input[type=submit]:not(.chatInput){
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
In CSS2, and more specifically IE8 and lower, you cannot do this. You have to do something like:
input[type=button] {
border: 1px solid grey;
padding: 2px 10px 2px 10px;
margin-top: 5px;
margin-bottom: 5px;
}
input[type=button] .chatInput {
/* Explicit default style */
}
Mozilla works with
:not(.classname) input {background: red;}
though i try to avoid negative css. perhaps everything else (besides .chatInput) should have an additional class.
Related
The problem is when I set black button background, white color, white 4px border and then border-radius say 5px the black pieces appear in the corners of the button. It happens with <input> and <button> elements. <div> tags don't suffer from it.
Is it normal and does somebody know how it could be fixed?
CodePen
HTML:
<div id=a>
<div id=b>Button</div>
<br>
<input id="but1" type="button" value="Button" />
<button id="but2">Button</button>
</div>
CSS:
div#a {
background:rgb(255, 250, 204);
width:200px;
height:120px;
padding:10px;
}
div#b {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
border-radius: 5px;
text-align:center;
}
#but1 {
border: 4px solid yellow;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
#but2 {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
Thank you for your answer, robjez.
Recently I've found almost the same solution. I used padding-box for the background-clip but with the background-color instead of background. Cause with the background property it only works when the background-clip is in the end of the rule. I guess it's because of the cascading inside CSS rules. And if I use background-color it works with any order of properties.
#but1 {
padding: 5px;
width: 70px;
border-radius: 5px;
color:white;
background-clip:padding-box;
background-color: black;
border: 4px solid yellow;
}
CodePen
This is kind of browsers's bug, to avoid that you need to use background-clip, like so:
#but1 {
padding: 5px;
width: 70px;
background: black;
color:white;
border: 5px solid yellow;
border-radius: 5px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip:padding-box;
}
This is described here and here
Hope this will help
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.
For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.
The .paginate_button rule should come first:
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.
If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.
The best solution is to hide any unnecessary button.
use the following :
.paginate_button_disabled {
display: none;
}
in this case previous, next, first and last buttons will be shown only when they are needed.
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.