http://jsfiddle.net/4UA82/1/
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
#subscribe-submit input[type="submit"]:visited {
text-decoration: none !important;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:hover {
font-size: 12px;
background-color: #2b2b2b;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:active {
font-size: 12px;
background-color: #2b2b2b;
}
I am just trying to get this button to hover to the desired background color, but it is not working for some reason.
I can get it to hover if I delete the initial settings though:
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
So I am not sure what is going on.
thanks!
Remove the !important tag
#subscribe-submit input[type="submit"] {
background-color: #24890d;
}
The need to use !important on every attribute suggests that there are flaws in the way you are structuring your CSS
In #subscribe-submit input[type="submit"] Change
background-color: #24890d!important;
to
background-color: #24890d;
Related
I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;
Code I have written to override current styles but I cant seem to figure this out
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
I need to changemy react-datepicker color of selected date to another color. How can I select this range of date in css?
.react-datepicker {
font-family: RobotoMedium;
font-size: 14px !important;
color: #c7c7c7 !important;
&__header {
background-color: $white !important;
padding-top: 0px !important;
border: none !important;
}
&__day-name {
color: #c7c7c7 !important;
font-size: 14px !important;
}
&__day {
color: $black !important;
font-size: 13px !important;
&--keyboard-selected,
&--selected {
border-radius: 25px !important;
background: $dark-red !important;
color: $white !important;
}
&--disabled {
color: #c7c7c7 !important;
}
}
}
Use this scss, Change color like this.
I'm working on a custom bootstrap menu and for some reason, I can not change any styles of the menu item once the user is on the item.
Is there something wrong with my syntax, its Monday morning so maybe I'm tired and have a simple mistake but I can't see it.
.navbar-inverse {
.navbar-nav {
padding: 10px !important;
a {
&:hover {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
&:active {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
&:focus {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
}
}
}
I can work it with css, for example
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
but not in sass, why is this ?
I want to ask that is possible use some bootstrap's paginatinon to ngx Pagination ? I would like to use mechanism from ngx Pagination and css from bootstrap.
You can use your own template and customise the styling if that's what you're trying to do to look like bootstrap:
https://github.com/michaelbromley/ngx-pagination#paginationcontrolsdirective
https://github.com/michaelbromley/ngx-pagination#styling
An example here:
http://michaelbromley.github.io/ngx-pagination/#/custom-template
Or you could use ngx-bootstrap :)
https://valor-software.com/ngx-bootstrap/#/pagination
Apply Bootstrap style on "ngx-pagination" Component
After installation ngx-pagination, add this style in your custom style sheet or in your component related style file
.ngx-pagination{
margin-bottom:0 !important;
}
.ngx-pagination li{
margin-right: -1px !important;
}
.ngx-pagination li.current{
background-color: #007bff !important;
border: 1px solid #007bff !important;
padding: 6px 12px !important;
z-index: 999999 !important;
position: relative;
}
.ngx-pagination li a:focus{
outline:none;
}
.ngx-pagination a, .ngx-pagination button{
color: #007bff !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
padding: 6px 12px !important;
}
.ngx-pagination .disabled{
color: #6c757d !important;
pointer-events: none !important;
cursor: auto !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
padding: 6px 12px !important;
}
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there