When i hover over the items on autocomplete dropdown, background-color is not changing, it's still white.
I am using this styling in site.css:
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
BundleConfig code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"
));
Note: I am using this widget on a Bootstrap input text
Related
I have a custom style input range and I want to have height 0 to support my style -> the idea is to not have any in built style so I can make my slider appear according to a separate span element styles included on top, so for the span element to be visible, my input range custom styles should not be visible at all.
While my idea worked like a charm it is preventing click from working on safari and chrome - on firefox the click still works properly, with height 0.
Is there a way to tweak my input range style such that I can achieve this? Please find my input range styles below:
Css
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
// background: rgba(13, 13, 13, 0);
background: rgba(0, 0, 0, 0);
}
Html
<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />
okay I solved the problem! We can provide background transparent. That made the slider clickable!
I found an excellent article on this topic.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
border-radius: 0px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />
** Please run on chrome and safari to test:D
I hope this post helps someone.
Can you please take a look at this demo and let me know how I can add Box-shadow to Pseudo After Content? as you can see I tried to add like
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
but it is not adding the shadow and instead creating a box
body {
padding: 50px;
background: #eee;
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
<div class="hero"></div>
I think This Code will help you.
I have added properties: transform-origin and box-sizing
For reference: transform-origin and box-sizing
body {
background-color: #888;
}
.hero {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.hero::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #bada55 #bada55;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="hero"></div>
Deleted all the shadows and added container with property filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2)); which creates shadow by shape.
body {
padding: 50px;
background: #eee;
}
.container {
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
filter: drop-shadow;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
}
<div class="container">
<div class="hero"></div>
</div>
Hi im trying to style my jquery autocomplete, all is well but when i tried to hover on the items its displaying on a bottom left side of my page, any suggestions to fix this? here is my css code.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
How to add bootstrap focus glow to Bootstrap Tags Input (for Bootstrap 3)?
bootstrap-tagsinput.css file:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
Is it possible to vertically align labels?
Thanks.
It is currently impossible in pure CSS as there is no parent selector but you can do it in JavaScript:
$('.bootstrap-tagsinput').focusin(function() {
$(this).addClass('focus');
});
$('.bootstrap-tagsinput').focusout(function() {
$(this).removeClass('focus');
});
and CSS:
.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
Straight from Bootstrap site. If you look at their focus CSS it looks like this.
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
What you might want to try is add the above onto your class from your code above. It would look like this.
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
I have not tried this on anything. But I think this might help you.
Hi I am trying to override the css for the bootstrap nav btn in my css, I want to change the colour and thickness of the 3 white lins but I have had trouble finding where to change I know it is to do with the span icon-bar but not sure where in the css.
Try this...
.navbar-inverse .navbar-toggle .icon-bar {
width: 20px;
height: 4px;
background-color: #cc0000;
display: block;
}
Demo: http://bootply.com/79822
The class you are looking for is "icon-bar"
This controls the bars.
Look for the below code in the css file:
.navbar .btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
Modify this as you see fit.
Good luck!