I have a search input box and currently when it is not selected it shows Search here but instead of text can I have an image?
code
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='onSelect($item, $model, $label)' placeholder="Search here" typeahead-focus-first="true" ng-disabled="loading" ng-blur="autocompleteBlurred()" />
Here is a plunker link you can check.
You can do it directly using css
input#autoComplete {
background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-16.png);
background-position: 10px center;
background-repeat: no-repeat;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
padding: 10px 5px;
text-indent: 20px;
-webkit-transition: all 0.2s;
-moz-transition: all 2s;
transition: all 0.2s;
}
input#autoComplete:focus {
background-position: -20px center;
text-indent: 0;
}
Check this plunker
In case if you want text also do not remove placeholder="Search" from your input
Related
I applied custom css on my checkbox but now it is showing two..
When I just apply the custom css to the previous one it doesn't apply them.
Can anyone help fixing it?
.treejs-checkbox {
width: 25px;
height: 25px;
justify-content: center;
align-items: center;
position: relative;
border-radius: 100px;
background-color: #FFF;
border: 2px solid #00EA90;
box-shadow: 0px 0px 0px 0px #00EA90 inset;
transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
<li>
<span class="treejs-checkbox"></span>
<span class="treejs-label">Teams</span>
</li>
It just shows double checkboxes.
There was already existing CSS and I inspected and just changed the existing ones.
.treejs .treejs-checkbox::before {
width: 18px;
height: 18px;
justify-content: center;
align-items: center;
position: relative;
border-radius: 100px;
background-color: #FFF;
border: 2px solid #00EA90;
box-shadow: 0px 0px 0px 0px #00EA90 inset;
transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
I used psuedo to change them. :)
I hava made two buttons by CSS imitating the work from https://codepen.io/xflotus/pen/deXBzR. But they will move together when clicking one of them. I have checked the code carefully, but can not find the clue. The pen of the code is at: https://codepen.io/xflotus/pen/gzWyrg. I think the :active is not the problem:
.button:active {
margin: 2px 0px 20px 10px;
}
But, I have no idea how to find the bug. Thanks!
Changing margins is not the best way to make a movement of a button in active state because the entire container moves down. For the movement of a single button try this code instead and remove the old code with margins:
.button:active{transform:translateY(10px)}
Now only one button will move instead of both. You can also aply -webkit-transform property if you need support in older browsers, but it's not required for new ones.
More about this topic: LINK
EDIT:
FULL CODE SNIPPET:
.button {
display: inline-block;
padding-left: 68px;
padding-right: 20px;
height: 40px;
line-height: 40px;
font: 'Arial', Helvetica, sans-serif;
font-weight: 700;
font-size: 15px;
color: black;
text-decoration: none;
margin: 0px 0px 20px 10px;
position: relative;
}
.button .bar {
width: 1px;
height: 30px;
background: black;
position: absolute;
top: 5px;
left: 50px;
}
.button .arrow {
position: absolute;
left: 20px;
top: 11px;
}
.button .arrow .top {
position: absolute;
top: 0;
left: 3px;
width: 6px;
height: 9px;
background: #000;
}
.button .arrow .bottom {
position: absolute;
top: 9px;
left: -2px;
width: 0px;
height: 0px;
border-width: 8px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.button:active{transform:translateY(10px)}
/* ---------- CSS3 ------------*/
.button {
border-radius: 3px;
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
transition: background-position .2s ease, margin .1s ease;
-webkit-transition: background-position .2s ease, margin .1s ease;
-moz-transition: background-position .2s ease, margin .1s ease;
background-repeat: repeat-x;
}
.button:hover {
background-position: 0 10px;
}
.blue {
background-color: #00aeef;
background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
background-image: linear-gradient(top, #00aeef, #00587a);
text-shadow: 1px 1px 1px #23aaff;
border-top: 1px solid #23ccff;
}
.blue .bar {
box-shadow: 1px 1px 1px #23ccff;
}
.green {
background-color: #0f9;
background-image: -webkit-linear-gradient(top, #0f9, #060);
background-image: linear-gradient(top, #0f9, #060);
text-shadow: 1px 1px 1px #9f0;
border-top: 1px solid #23ccff;
}
.green .bar {
box-shadow: 1px 1px 1px #9f0;
}
<div id="container">
<a href="#" class="button blue">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
<a href="#" class="button green">
<div class="arrow">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bar"></div>
Download
</a>
</div>
Jakub Muda answer is better than mine in term of code, but to answer your exact question, that's because you add a margin to the clicked button, it pushes the container down, so both button move.
I modified your source https://codepen.io/anon/pen/RyVOyV and now they don't move together. The problem is that to get it, I had to make them position absolute.
.blue {
position:absolute;
top:15px;
}
.green {
position:absolute;
top:15px;
left:180px;
}
You can manipulate them more to get them positioned relative and independent, but that out of the scope of this question.
Hope it helps ;)
Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.
Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!
I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">
Basic input fields of type Password display badly on safari 9.1
The problem is the 'Key' in safari. This is my html:
<div class="form-group">
<input type="password" class="form-control" placeholder="Wachtwoord *" name="password" required="">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Bevestig wachtwoord *" name="password_confirmation" required="">
</div>
Chrome:
Safari
Setting height:100%'; will fix the problem but this obviously changes the height of the field, which is not what i want.
Css:
input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
vertical-align: middle;
border: 1px solid #cbcbcb;
outline: 0;
box-shadow: none;
padding: 12px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.form-control {
border: 1px solid #cbcbcb;
border-radius: 0;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Removing the padding from the input object was the solution.
input[type="password"] {
padding: 12px;
}
I had exactly the same problem and searched high and low for a solution which in the end turned out to be as easy as: line-height: normal;
This seems to work across browsers for me .. hope you get the same result!
On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!