I want to create this type of animation in textbox in materialize css. Checked many codepen an websites but can't find anything which helps with materialize css. Sometime two border display or sometime no effect.
Anyone provide some sourcecode of css so i can implement it. I don't want to include other css library. Only with materialize css and little bit css.
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
I think customizing this after or before presudo will work.
Created Pen Here :
https://codepen.io/naitik_kundalia/pen/bRNeaz
I had created sliding border but it also work in reverse. Textbox removed on focus after animation end.
Check this Pen:
$(".mat-input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$(".mat-input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
});
https://codepen.io/legeoffrey/pen/VYMLNq
Hope this will help you
Related
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I need to make my Previous and Next buttons smaller.
Im using the dataTables plugin alongside bootstrap so the tables are already styled.
Here you can see the involved files .css and .js
I've tried twicking them a bit but I can't make it work for me, I can't fing the buttons-related data.
Thanks in advance, any direction you may point would be helpful.
You can select those two links by class
.previous, .next {
// CSS here
}
Here's a live version to play with.
Answering to an old question.
You are probably looking for this. I found it somewhere on Datatable's official site not sure where. But for me the below solution worked:
.dataTables_paginate>span>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
.dataTables_paginate>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
Hope it helps someone like me.
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
In webkit if I set border radius on an image that has a border, the image won't sit nicely within the border but overlay the border and remains square.
http://jsfiddle.net/ECNJ4/
Any fixes that don't mean using a background image instead or adding markup?
check out: http://jsfiddle.net/ECNJ4/6/
CSS
img {
border-radius: 15px;
box-shadow: 0 0 0 16px red;
}
I had to use a wrapper element around the img to make it work. Maybe there's a better solution, but I didn't find it.
The possible outline styles that I know of are shown below.
dotted
dashed
solid
double
groove
ridge
inset
outset
None of these puts an outline around an input element like shown below:
With what CSS stylling can someone style an input element like shown above?
it looks like a browser default behavior, but you can fake it with css3 box-shadow
http://jsfiddle.net/meo/BndwU/
or with your colours:
http://jsfiddle.net/meo/BndwU/1/
or with bonus focus animation:
http://jsfiddle.net/meo/BndwU/2/
This will only work in modern browsers that accept CSS3 properties like box-shadow:
input[type="text"] {
background:white;
border:1px solid #ffcc00;
box-shadow:0 0 3px #ffcc00;
-moz-box-shadow:0 0 3px #ffcc00;
-webkit-box-shadow:0 0 3px #ffcc00;
}
See example →
Using the new CSS 3 box-shadow you can put a gradient border around an input box. First wrap it in a span with a new class that contains something like:
.coolio {
box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
}
Here is a working example: Gradient Shadow Outline Demo