I am trying to style an active item in bootstrap list-group similar to this:
See how Recent is highlighted with just a dark border on the left.
This is my code:
Code
This is my css:
.list-group-item.active {
background-size: 10px;
background-color: #add8e6;
border-color: #add8e6;
}
Please advice.
Thanks. Added a border-left: 5px solid blue and it worked
I am using Bootstrap 4.5.0. I reduced the height of Bootstrap modal by half. Now when I click the close icon on top right corner, a weird looking (I don't know what it is) squarish looking border/frame appears. This is how that ugly thing looks like:
How do I get rid of this? Given a choice I would prefer "Pure CSS" solution. Thanks.
Update:
This is what I used but did not work.
.close {
color: ghostwhite;
opacity: 1;
border:0px solid #fff;
outline:none;
}
As per Umesh's comment below, this fixed it for me:
.close:focus {
outline: 0;
border: 0px solid #fff;
outline: none;
}
I have a Template constructed out of many Cells as part of a Form. I wrote several Types which have borders background colours and so on, so that i , in the end, could apply them to the cells at the edges and construct a box around the whole Information by putting them together. To make it clear here an example of what i try to do:
if you had 9 cells in form a cupe the middle top one would just have a border on the top the top left one would have borders on the left and the top and so on. That works well for the "straight" parts, in this example the middle parts of every side.
But the corners just don't appear neither the background color or the borders.
What i tried is basically that . I wrote the following code for the bottom right corner:
.brechtsunten {
background-color: #81a0e9 !important;
border-right: 2px solid !important;
border-bottom: 2px solid !important;
border-color: #183b8b !important;
}
And it does nothing , and by nothing i mean it doesn't even appear in the style filter of the inspector section if i open the form extern in my browser, so i get nothing i could work with like a syntax error message.
You have to specify the border property if you use border-bottom
Example
border-bottom-width: 33px;
The correct way to write your CSS
background-color: #81a0e9 !important;
border-right-width: 2px;
border-bottom-width: 2px;
border: 0px solid #183b8b;
}
I would like to add a line between the single post titles, the single categories and the months in the right side column. (Here is the link, to show what I mean: www.veda-vit.de)
Is there anybody who knows how I can do that?
Thank you very much.
Greetings,
pradhana
You could add border-bottom: 1px solid #ccc; to .widget-title if you want a line between the title and contents like this: https://www.dropbox.com/s/50b6f862ied5hv6/Screenshot%202016-11-12%2007.24.05.jpg?dl=0 or if you'd like lines between each item like the screenshot below you would add the border CSS to .widget-container ul li https://www.dropbox.com/s/kn8pu2r4g7y6njt/Screenshot%202016-11-12%2007.23.48.jpg?dl=0
Updated CSS:
#secondary .widget-title {
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}