I am struggling to remove all Bootstrap 4 native styling from the Bootstrap .card component. There is a chance that it is actually not related to Bootstrap, however I do see it in Edge as well.
Please help me remove this blue line displayed on a selected .card-header!
I have tried various overrides like below:
.card-header {
background-color: white;
border-color: orange;
border: 1px solid orange;
padding: 0;
padding-bottom: 5px;
text-decoration: none;
}
Thank you!
What you are seeing here is accessibility styling that bootstrap has added to help users see where there are currently focused on the user interface. The collapse component your using also uses the card component as well.
Although I don't recommend it, you can remove the accessibility styling no different than removing other styling like you showed above, however you need to access the pseudo class.
This accessibility styling is done through the pseudo element focus.
You can access the pseudo properties of a class by adding :focus at the end. In this cases the styling is done on a class called .btn. To change only buttons within an collapsible elements do the following.
.card .btn:focus {
box-shadow: none;
}
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
In my react project, I styled the buttons like this in an external stylesheet file called project.css:
button {
max-width: 150px;
margin: 20px 0;
padding: 12px 20px;
border-style: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
This has been working fine, however I recently installed some libraries that also use buttons. My button style that you see above, is interfering with the style the libraries use.
I was wondering how I could keep my button styles, but have the libraries I use ignore my custom button styles.
Is this doable?
Thanks!
Depending on the structure of your code and the libraries code there are a few options.
Load the library styles after your own. When two selectors have the same specificity the last one loaded applies.
Scope your selector under a parent selector unique to your application
.mycode button {
...
}
Migrate your selector to a class instead of targetting the button tag.
.mybutton {
...
}
In general its more flexible to target a custom css class than the tags themselves.
Premise: I'm doing an Internship right now, so I am not a pro.
Hey Developers, I need your help.
I inherited a work from another guy in which I have to re-style 3 contact forms.
Problem is: two forms are generated in Wordpress with Contact form 7, and the last one is done using Woocommerce.
What's the best way to proceed to make all three forms consistent?
Do I override the styles of the theme with my own styles?
Any better solution?
Thanks in advance.
The answer to this is to identify the common fields.
In most cases you can add styling to the input and input[type="X"] fields.
This will mean not only will these forms be consistent but everything else that a form will be consistent.
E.g.
input {
background: #f1f1f1;
padding: 5px;
}
input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
This will style all the inputs and then also target the input with the type submit.
In most cases these stylings will be ignored due to weight of the styling so it may be necessary to nest these inside classes and divs. Or just use !important to overide them.
E.g
//Overiding with !important
input {
background: #f1f1f1 !important;
padding: 5px !important;
}
//Nesting to give extra value
html body .container form input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
More information on weights given to classes/id's/elements here.
More information on input types here.
I'm trying to style tag in html using css. It works in Firefox properly but not in chrome. Here is the code i use in styling forms. After referring some through internet I used !important; command along with this style sheet. But it did not worked.
.style {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted gray;
padding: 5px 2px 0 2px;
width:300px;
font-size: 14;
color:#FFF;
}
.style:focus{
outline: none;
border-color: #51CBEE;
}
simply? you can't.
Firefox allows you to do some styling on a <select>, but is not consistence along browsers.
You should go for a JavaScript masking solution if you really want the <select> to be styled crossbrowser.
Maybe Chosen or Selectize can help you.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)
.k-treeview .k-in.k-state-hover{
background-image:none;
background-color:#fff;border:none;
}
.k-treeview .k-in.k-state-selected{
background-image:none;
background-color:#fff;color:#000;border:none;}
Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?
With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...
.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
border-style: none;
border-width: 0;
padding: 2px 4px 2px 3px;
}
Coupled with the use of .k-state-disabled, it appears I might have found a slightly better CSS solution.
The nodes don't move at all, and it appears completely disabled.
.k-treeview .k-in.k-state-hover,
.k-treeview .k-in.k-state-focused,
.k-treeview .k-in.k-state-selected {
border-color:transparent;
background-color:transparent;
}
I've also added some JavaScript to prevent the expanding of the nodes, and disabling of the checkboxes.
In my case this helped:
.k-window-action .k-state-hover {
border: none;
background: none;
}
P.S.: "border-color: transparent" caused slight move on hover