Is it possible to change slider bar button(for reading numeric values) in any custom button? Please give your suggestions.
Turns out, there is in webkit:
input[type="range"]{
-webkit-appearance:none !important;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
}
You can then add whatever attributes you need to each those selectors. Background, gradient, etc...
Hope that helps!
See this link as well: http://webstutorial.com/range-input-slider-html5-css3/html-5
Related
Using template engine as PUG
Html body
nav#navbar
ul.flex-container
div#logo
img(src='/static/logo3.png')
This is what image logo3.png looks
Can you suggest any css property?
Or photoshop tool to do it.
Searched but found opacity property which doesn't help.
You should use Google for more of these simplest tasks. This is not the right place to ask these type of questions. You can use an online background remover like https://remove.bg to remove backgrounds if you are not familiar with image editing apps. Btw, here's your updated image:
We can use background remover online tool as Vivek mention.
We can also do it by using css *Invert which changes white background to black. We can also use contrast and other property for it *Css filter function
#logo img{
filter: invert(1);
height: 50px;
width: 60px;
}
This is result of invert function
Thanks everyone who helped me in this!
Unfortunately this image is not transparent, you can see the gray and white chessboard pattern in the background.
I suggest you should use a photo editing app to select the content and delete everything other than the selection.
I have a CSS conflict problem when incorporating Slick Carousel in my personal webpage. Below is a link to the page where you can see that there are no visible navigation arrows.
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-004-BN/index.php
Can this be due to CSS in my page colliding with Slick's CSS?
Here how it looks before incorporating the carousel on my page:
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-003-BN/index.php
Remove height form the .esempio class and add color in .slick-prev::before, .slick-next::before and it's work perfectly
.slick-prev::before, .slick-next::before {
color:red;
}
Arrows are white. Change:
.slick-prev:before, .slick-next:before
{
color:black;
}
you need to remove the color style from slick.css under (slick-prev:before, .slick-next:before) css styles
That is setting the arrows to white which is why they can not bee seen on the page.
Or set these as new styles in your style sheet with the !important tag that way these should be the ones which are used.
I want to use angular material for contact form but I have problem to change styles of input fields and placeholders or labels when is not on focus. I made codepen and if you look there placeholders are grey. I want them to be green, change fonts to any other, and to make good position for them using padding or everything else.
I try solution as
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
but nothing happened. I can't figure out how to change this and I didn't find any solution on internet.
Can anyone helps me?
Thanks in advance
I added this piece of code there and it works
md-input-container.md-icon-float>label
{
color: green
}
Demo: http://codepen.io/muzic12freakzz/pen/apKEOm
This is just a starting point. You can add more styles to it.
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I'm considering starting to use this technic of icons as fonts, as it seems pretty awesome. But I can't seem to figure out how make it change colors on hover of the link. Here is a jsfiddle for you to play with:
http://jsfiddle.net/eNhUf/17/
As you will see, when you hover a text like "caution", the text goes to BLUE, and I would also like the icon/font to go to blue as well.
Does anybody know how to do this?
Thanks.
.caution.icon:hover:before{content:"\0021";color:green }
This will make caution icon go green when you hover the link, I'm sure you can customize the idea as you like! http://jsfiddle.net/agentmilindu/eNhUf/24/
Font icon libraries usually use pre-generated content to inject the icon into the element. This means that you need to target that area and set the color.
<p class="icon caution email">Email</p>
<style type="text/css">
.icon.caution, .icon.caution:before { color:blue; }
</style>
Try this:
.icon:hover, .icon:hover:before { color: blue; }