ok, here is myResource.css
.gwtCellButton button {
margin: 0;
padding: 5px 7px;
text-decoration: none;
....more styles here...
}
.gwtCellButton button:active {
border: 1px inset #ccc;
}
.gwtCellButton button:hover {
border-color: orange;
color: orange;
}
Now I want to have .gwtCellButtonSmall that is exactly like .gwtCellButton except that it has padding: 1px 2px;
Ofcourse if i do like this, then I can duplicate code:
.gwtCellButtonSmall button {
margin: 0;
padding: 1px 2px;
text-decoration: none;
....more styles here...
}
.gwtCellButtonSmall button:active {
border: 1px inset #ccc;
}
.gwtCellButtonSmall button:hover {
border-color: orange;
color: orange;
}
If I understand your question correctly, you want to have two elements with similar styles with one having different padding.
Is so, you can share styles between the two elements:
.gwtCellButton button, .gwtCellButtonSmall button{
margin: 0;
padding: 5px 7px;
text-decoration: none;
...
}
Then use !important to override the padding for the specific element:
.gwtCellButtonSmall button{
padding: 1px 2px !important
}
Or you could use something like Sass.
You should not need to duplicate any code or, worse, use !important.
This problem can be solved through the use of modifier classes by specifying two classes on each HTML element: a base gwtCellButton class and a modifier class (regular and small in this example).
.gwtCellButton button {
margin: 0;
text-decoration: none;
}
.gwtCellButton.regular button {
padding: 5px 7px;
}
.gwtCellButton.small button {
padding: 1px 2px;
}
Using the !important declaration unnecessarily can lead to specificity issues down the line.
Use !important. The property which has !important overrides the exactly property if there are any other.
So your case,
padding: 1px 2px!important;
Heavily using them causes you some problems sometimes. Thus, do not forget to have a quick look at this summary too.
Related
I want to apply the CSS class washes_times_links to the html below, but for some reason it's not working.
.washes_times_links a {
display: block;
padding: 15px;
padding: 13px;
text-align: center;
color: #3b524b;
font-size: 15px;
text-transform: capitalize;
}
.washes_times_links a:nth-child(odd) {
background-color: #fff;
}
.washes_times_links a:last-child {
border-radius: 0 0 5px 5px
}
.washes_times_links a:hover {
color: #fff;
background-color: #12be9c;
}
<p class="washes_times_links">
1 time a week
2 times a week
</p>
It looks fine.
Inspect on the css attributes in this: [https://jsfiddle.net/nf0a5gq7/][1] and you will see that all css attributes have been applied, but you're missing 'border' attribute (in .washes_times_links a:last-child), and this is why you can't see the border..
Generally speaking in a way to be useful for whoever cross by here.
To apply style in odd/even selector:
.class_name a:nth-child(odd) {
background-color: #ffff99;
}
.class_name a:nth-child(even) {
background-color: #b8d1f3;
}
To apply radius/style for first/last selector:
.class_name a:first-child {
border-radius: 5px 5px 0 0;
}
.class_name a:last-child {
border-radius: 0 0 5px 5px;
}
all together :
HTML
<p class="class_name">
1st row
2nd row
3rd row
4th row
</p>
CSS
.class_name a {
/* default links styles */
}
.class_name a:nth-child(odd) {
background-color: #ffff99;
}
.class_name a:nth-child(even) {
background-color: #b8d1f3;
}
.classname a:first-child {
border-radius: 5px 5px 0 0;
}
.class_name a:last-child {
border-radius: 0 0 5px 5px;
}
.class_name a:hover {
color: #fff;
background-color: #12be9c;
}
Tip: How do I ask a good question?
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
I have researched the question, and from what I gathered, you can use -webkit-appearance: none; to do the trick. It removes the rounded corners off of the input, but the problem is that I can't set the border-radius after doing that. I want the search to have a 10px border radius.
Make sure that the appearance property is first and place the other properties after it. Try this:
body {
background: black;
color: white;
}
input[type="search"] {
-moz-appearance: none;
-webkit-appearance: none;
border: 0px none transparent;
border-radius: 10px;
line-height: 20px;
background: #efdefc;
color: #930;
padding: 3px 5px;
}
<input type='search'>
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
Edit
I have started a project where I am making my own not styleable form elements. For more info see this question.
Styling checkboxes
Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.
HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS
Hide checkbox, style the <span> as you like. I've used a CSS sprite here.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
Styling select inputs
I haven't found a simple working solution for this yet.
Here is an article about a hack that seems to be on a good way.
Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.
You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.
This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...
HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
JQuery
$(document).ready(function () {
$('body').styleMyForms();
});
CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...
a lot, and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)
And actually you don't see anything of that in your code
So the code can only come from the browser
and browsers are different, all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.