I am currently designing a webpage using bootstrap. I needed a custom button color, so I designed my own button classes, which you can see there:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Since the button group is of the same color I wanted to put a border only on the right side, to show the separation. But the border appears only when the mouse is over the button (see https://jsfiddle.net/DTcHh/20757/ ). Why is it so ? How do I make it be there all the time ?
This problem has to do with the z-index of the buttons so to fix the problem without mixing up with the margin you need to put borders to all the buttons then remove the first-child left border
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
border-left-color: #684235;
}
.btn.btn-radio:first-child{
border-left-color: transparent;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Bootstrap has this line in css. This creates problem.
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: -1px;
}
You can use this, but i dant know if it will not make some other problems:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
margin-left: 0!important;
}
you will have to override the .btn in bootstrap.css file
it currently has
border:1px solid transparent; and hence your border is not showing normally
Related
I have a react-bootstrap Popover component with custom styling for the arrow (gray color and 50% opacity). The CSS is as follows:
.popover .popover-arrow::before, .popover .popover-arrow::after {
border-color: #212529 !important;
opacity: 0.5;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
This works fine for horizontal arrows (when the Popover is left or right of the target):
However, when the arrow is vertical (Popover above or below the target), the colors are inverted to give a transparent arrow on a grey background:
My question is, why does this inversion happen and what can I do to fix it?
Eventually I managed to fix this with the following CSS:
.popover .popover-arrow {
display: block;
opacity: 0.75;
}
.popover[x-placement^=top]>.popover-arrow:after {
border-top-color: #212529;
}
.popover[x-placement^=bottom]>.popover-arrow:after {
border-bottom-color: #212529;
}
.popover[x-placement^=right]>.popover-arrow:after {
border-right-color: #212529;
}
.popover[x-placement^=left]>.popover-arrow:after {
border-left-color: #212529;
}
Thanks to Michal Duszak for this snippet which gave me something to go on.
I'm trying to add a red 2px border when a customer hovers over one of my three 'service widgets' on my website https://tomnicholls.co on the homepage. I can't figure out where to apply the code as I can't find a container? I can't even seem to add a regular border never mind a border on :hover.
I have tried applying code to .col-link & .col-link .custom-link and have also tried giving the column a class and applying code to that as well as giving the actual content block a class (btn-widget) and applying css to that but nothing seems to be working.
.btn-widget {
width: 328px !important;
margin-left: 72px !important;
border-left: 2px !important;
border-right: 2px !important;
border-top: 2px !important;
border-bottom: 2px !important;
border-color: #c92228 !important;
z-index: 1000;
color: #000000 !important;
}
I would like to solve the problem and have a border on hover
It worked with this :
a.col-link.custom-link:hover {
border: 2px solid red;
}
How do I change the blue highlight on this dropdown please?
link to select box demo
I'd like to change the highlight color to gray if this is possible.
select {
border: 0;
color: #EEE;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
-webkit-appearance: none;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!
You have few options:
Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.
I believe you are looking for the outline CSS property (in conjunction with active and hover psuedo attributes):
/* turn it off completely */
select:active, select:hover {
outline: none
}
/* make it red instead (with with same width and style) */
select:active, select:hover {
outline-color: red
}
Full details of outline, outline-color, outline-style, and outline-width
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Just found this whilst looking for a solution. I've only tested it FF 32.0.3
box-shadow: 0 0 10px 100px #fff inset;
try this.. I know it's an old post but it might help somebody
select option:hover,
select option:focus,
select option:active {
background: linear-gradient(#000000, #000000);
background-color: #000000 !important; /* for IE */
color: #ffed00 !important;
}
select option:checked {
background: linear-gradient(#d6d6d6, #d6d6d6);
background-color: #d6d6d6 !important; /* for IE */
color: #000000 !important;
}
When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.
select:focus{
border-color: gray;
outline:none;
}
This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.
select option:checked:after {
content: attr(title);
background: #666;
color: #fff;
position: absolute;
width: 100%;
left: 0;
border: none;
}
To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option and select option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.
select option {
background: #f00;
color: #fff;
box-shadow: inset 20px 20px #f00
}
select option:hover {
color: #000;
box-shadow: inset 20px 20px #00f;
}
i just found this site that give a cool themes for the select box
http://gregfranko.com/jquery.selectBoxIt.js/
and you can try this themes if your problem with the overall look
blue - yellow - grey
Add this in your CSS code and change the red background-color with a color of your choice:
.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}
In Chrome, I can set the background-color of a text input field and all that changes is the background color. In this way I can highlight fields that need to be paid attention to (make the background light red so that the user knows there's a mistake there). In Firefox, and I suspect other browsers, the background color is changed, but the text field also looks more plain. Inset shadows disappear and when focused on the field there's no blue glow around it. It just looks different.
Is there a way to highlight a text field without changing the look and feel of it in Firefox (and other similar browsers)?
UPDATE: Example code:
<ul>
<li><input type="text" style="background-color: red"/></li>
<li><input type="text"/></li>
</ul>
You can see the difference between the 2 text fields. Hovering and focusing on the normal text field feels native to the OS. But the text field with a red background isn't as good anymore.
Here's the jsfiddle link.
I got the same issue back then, seems that if you want to change the background-color, you must change the border style for Firefox, 2px solid and the color of your choice.
No, I do not believe so. Opera has the same behavior as Firefox. The best solution I came up with was to only style the elements if they required the user's attention (the element has focus or contains invalid data).
This is what I use as part of my Sass bootstrap:
#mixin background($image, $bgcolor) { background: $bgcolor url(#{$imagedir}#{$image}) no-repeat scroll right center }
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
// background-color background-image background-repeat background-attachment background-position
&:required:valid, &:required:in-range {
//border: 1px solid #0f0;
&:focus { outline: 1px solid #0f0; #include background("tick.png", transparent); }
}
&:invalid, &:out-of-range {
#include background("asterisk_orange.png", $required-bg);
border: 1px solid $required-color;
&:focus {
background-image: url("#{$imagedir}exclamation.png"); outline: 1px solid $required-color;
}
}
}
This is what the generated CSS looks like:
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]), textarea, select {
font: inherit;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:valid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):required:in-range:focus, textarea:required:valid:focus, textarea:required:in-range:focus, select:required:valid:focus, select:required:in-range:focus {
outline: 1px solid #0f0;
background: transparent url(icons/silk/tick.png) no-repeat scroll right center;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range, textarea:invalid, textarea:out-of-range, select:invalid, select:out-of-range {
background: #fef8b4 url(icons/silk/asterisk_orange.png) no-repeat scroll right center;
border: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):invalid:focus, input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):out-of-range:focus, textarea:invalid:focus, textarea:out-of-range:focus, select:invalid:focus, select:out-of-range:focus {
background-image: url("icons/silk/exclamation.png");
outline: 1px solid red;
}
input:not([type^="date"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus + .tip, textarea:focus + .tip, select:focus + .tip {
display: inline;
position: absolute;
border: 1px solid red;
background: #fef8b4;
margin: 0;
padding: 2px .5em;
}
It's worth noting that for Opera, outline does not cause the element to lose its default styling like border/background does.