I'm using the Stylish browser extension to create a custom dark theme for a website. In a recent update, the site owner came up with rounded corners for a lot of things, which is ugly as hell in my opinion, especially with input fields. However, when I try to apply border-radius: 0px !important; using Stylish, the input fields go nuts. It works fine on things like regular divs, but not on any kind of inputs, be it a regular <input type=text>, a <textarea> or even things like a <select>.
This is how a text area looks like without my custom CSS:
This is how it looks like with my custom CSS:
This is how it looks like when I add border-radius: 0px !important; to my CSS:
When border-radius: 0px is applied, all other border properties and background are ignored. Not even the site's native CSS properties are used. The browser just uses the standard look like there were no CSS rules defined for the textarea at all. color still works though.
It's like border-radius was intended to change everything. If I add it only on :hover, the input fields only go crazy on hover. I don't even have to use 0px: The issue happens even when I use the same 6px that the site's native CSS uses.
This is my whole CSS rule:
textarea, input[type="text"], .textbox {
border-color: #282828 !important;
border-width: 3px !important;
border-style: solid !important;
border-radius: 0px !important;
background: #0F0F0F !important;
color: grey !important;
}
What's really weird is the fact that border-radius: 0px causes no problems when added using the Firefox developer tools, so it seems to be a problem with stylish.
What's causing this madness? How can I fix it? Is there a workaround? The only idea I had is to use a custom JS that adds the property ...
Oh my god, removing border-style: solid; fixes everything. I have no clue why, but I am happy now.
Related
First off, I did research this topic here and via Google for an entire day, and tried all I have found, for some reason I still can not seem to change Bootstrap styling. My custom css DOES work, since the first modification from it worked just beautifully where it did not need to override anything (so there was no default styling for input:hover, which I used, in bootstrap.)
Here is some code:
.input-group-prepend.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
NOTE that the selector here must be like the 20th version I tried. Here I can not change the way the input field behaves when in focus. I tried everything after like a dozen searches on Google, nothing worked. I also used Chrome Inspect to find where box-shadow is used, and inside Inspect I could also CHANGE the property, which resulted the look I desired, but after copying that part to my css with the css selector, it did not work anymore. Having tried also tweaking the selectors to make them more specific, calculated the 'Priority points' or whatever they are called even, used IDs and whatever, and put my stylesheet link after the bootstrap one in the html file - no change (for the better, that is). These all worked for other people here and on YouTube and everywhere on the internet, and seemingly I have the very same situation and solution and for me they still don't. I am thinking of leaving bootstrap and try building something from scratch, but I am not that experienced in CSS, and I feel like I never want to be if it is like this.[enter image description here][1]
Some more code:
button .btn-raised {
box-shadow: 0 30px 0 0 #007299;
}
The second part, when trying to set the box-shadow for buttons, it is not possible, even though neither btn or btn-light, which I use, does do anything with box-shadow, Chrome Inspect simply shows 'none' as the value of this property. (Although I found that there is some transition where it is involved, but no way I can override or disable it.) Again, a hell of a lot of selector variations was tried.
UPDATE: The problem is solved, turned out all the problems I had was because I missed clearing the cache before reloading the page - never forget that! :)
Seems to be working fine for me. I think you may be loading your CSS before Bootstrap or you have other styles overriding your latest styles due to specificity.
As a last resort, just to test this theory, you could try adding !important after your styles. If this works then you know it's an issue with selector specificity but I don't recommend using !important in general.
eg:
div {
background-color: #000 !important;
}
button {
box-shadow: 2px 5px 1px 0 #007299;
}
.input-group-prepend {
margin-top: 20px;
}
.input-group-prepend .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-light">I am a button</button>
<div class="input-group-prepend">
<input type="text" class="form-control">
</div>
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
I'm editing the Wordpress login page and it is going pretty good so far. I created a separate css file to do so and everything is working as it should except one thing.
I am unable to remove the border and box shadow from the form. I tried this:
#login form {
background: #7554a5;
border: 0px !important;
-moz-box-shadow: 0px !important;
-webkit-box-shadow: 0px !important;
box-shadow: 0px !important;
}
but it doesn't work. I also tried to look in the Wordpress's wp-admin.css to find how the box shadow is applied but I cannot find it. Any help?
Try this. You dont need important. Just put your css after wordpress one.
border: none !important
However you should check in firebug or chrome dev tools in css tab how your css gets overided.
box-shadow: none !important;
did the trick
I've got this selector code:
#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}
Everything is rendering properly except for the border: 4px solid #353434 !important;
When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.
If I manually type the same exact code into Firebug or Chrome tools, it works fine.
Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America
Anyone know why?
// Give the thumbs in the widget some style
is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)
Comments in CSS have to be enclosed in /* ... */.
As tim.baker mentions, you have have to use border instead of border-style.
Looking at your CSS it seams as though you have used
border-style: 4px solid #353434 !important;
Using purely
border: 4px solid #353434;
Should work
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>