I'm using selectize-rails gem and it doesn't look good because of the CSS from application.css being applied to it...
application.css:
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
I created separated css file for that particular view and copied as above into it and replaced the color with color: black !important;, similar with other params... But it doesn't give any effect. The label color is still white. Please help!
Related
I created a button class named "primary". I noticed that it looks different on a button and on a tag, they have other sizes for example.
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
How can I make the class look the same on both?
JSFIDDLE
With HTML tags, browsers add their own default styles to the tags (yes, it could differ from browser to browser). In your case, there are 2 properties you need to add in the .primary class: 'display: inline-block and font` properties.
As per the JSFiddle you shared. Here is the updated code and screenshot of the both elements height after the primary class code is updated:
.primary{
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
/*font-size: 1.5rem;*/
vertical-align: middle;
border: none;
/* these 2 lines to be added */
display: inline-block;
font: 400 1.5rem Arial;
}
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-family: "Goudy Bookletter 1911", sans-serif;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
This is because a browser already gives HTML elements their own style. You will overwrite this style with your own CSS. But a button will have a different style than an a element by default.
For example the line-height and font-family may be different.
And in your case it seems that display: inline-block will do the trick.
This is because elements inherit default styles, if you want the anchor to look the same simply declare the font family and font-size in your class;
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;
}
For some reason the icon does not change colour to red. It remains white/grey.
Does anyone know how to change colour to red?
.sidebar .nav-item .nav-link[data-toggle=collapse]::after {
color: red;
width: 1rem;
text-align: center;
float: right;
vertical-align: 0;
border: 0;
font-weight: 900;
content: '\f107';
font-family: 'FontAwesome';
}
There are heaps of other questions that do NOT refer to the "CSS Pseudo-elements" which is the type that i am using.
.icon-classname{
color: #f00;
}
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
HI i have a small Problem with my :hover CSS code. On IE8 my link hover just when i move mouse over text but outer text it doesn't work. I don't really know where my mistake is. Need some help!
html:-
text text text
CSS:-
.ctaBlock {
border: 1px solid #333;
font: 400 10px/43px arial,helvetica,sans-serif;
color: #333;
letter-spacing: .1em;
display: inline-block;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: uppercase;
line-height: 42px;
width: 34%;
}
#content .ctaBlock:after {
font-size: 7px;
font-weight: 400;
line-height: 1;
font-family: iconFont;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greyscale;
font-style: normal;
font-variant: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
content: '>';
display: inline;
margin-left: 3px;
}
#content .ctaBlock:hover {
background:rgb(255,255,255);
background: transparent\9;
background:rgba(255,255,255,0.3);
filter:progid:DXImageTransform.
Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
zoom: 1;
text-decoration: none;
cursor: pointer;
}
IE8 has some problems handling transparent parts of elements. I had the very same problem a while ago and I solved it by adding a transparent image (1px by 1px) as background in CSS:
background-image: url("transparent.png");
Or with a data-URL:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);
I think an even simpler solution could be adding a non transparent background color to your link. But this depends on your needs of a transparent background. I havn't tested the second solution, but you could give it a try.
opacity property does not work in IE8. add this background:rgb(255,255,255); and then add opacity:0.8 separately at the end. Or it would be better if you use hash color code.