My box is expanding to the right, how can I make it expand to the left?
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
Just align it to the right of its container element. Either change the display attribute to block and set the right and left margins to 0 and auto, or keep it as an inline element and apply text-align: right to the container block.
input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
Related
I have input and on focus I show omg before placeholder and text, but now displays from top to down and I need from left to right and best used transforms, and it would be from left to right just as it is now text. Can someone help me?
Thank you.
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
}
input[type="text"]:focus {
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: 5px center;
background-color: white;
padding-left: 35px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
Here you go:
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: -35px center;
}
input[type="text"]:focus {
background-position: 10px center;
background-color: white;
padding-left: 45px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
I was under the impression that if an element has a set height & width of 0, padding wouldn't push the width/height if the box-sizing is also set to border box, the thing is, this does seem to be the case, but as soon as I add a 1px solid border, the padding gets applied.
div#search > form#sform > a { display: inline-block; width: 20%; }
input#q { width: 80%; display: inline-block; border: 0px; }
div#search > form#sform > a { display: inline; width: 20%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' style='width:100%;height:100%' viewBox='0 0 70 70'%3E%3Cg class='base'%3E%3Cg fill='none' fill-rule='evenodd' class='main-fill'%3E%3Cpath d='M33.765 17.294C26.725 17.294 21 23.02 21 30.06c0 7.04 5.725 12.765 12.765 12.765 1.876 0 3.657-.416 5.263-1.146l6.266 9.793c.383.663.871 1.235 1.647 1.235 1.202 0 2.059-.818 2.059-2.059.007-.347-.225-.911-.412-1.235l-6.305-9.857a12.726 12.726 0 0 0 4.246-9.496c0-7.04-5.724-12.765-12.764-12.765zm0 1.647c6.15 0 11.117 4.968 11.117 11.118s-4.967 11.117-11.117 11.117A11.105 11.105 0 0 1 22.647 30.06c0-6.15 4.968-11.118 11.118-11.118z' class='main-fill'/%3E%3C/g%3E%3C/g%3E%3Cstyle%3E.main-fill%7Bfill:%23fff%7D%3C/style%3E%3C/svg%3E"); padding: 13px 10%; background-repeat: no-repeat; background-color: #a03f6e; -webkit-background-size: 50px 50px; -moz-background-size: 50px; -o-background-size: 50px; background-size: 50px; background-position: center center; margin: 0px; height: 40px; position: relative; top: 10px; left: 0px; }
div#search { position: absolute; top: 125px; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; z-index: 15; background-color: white; height: 40px; }
div#search:focus, div#search:focus-within { outline: 1px solid #dadada; }
div#search input#q { width: 80%; display: inline; border: 0px; height: 40px; padding-left: 6px; float: left; height: 0px; width: 0px; padding: 0px; padding-left: 10px; border-bottom: 1px solid #aaa; font-size: 20px; font-family: 'Montserrat'; text-align: center; -webkit-box-shadow: inset 0 0 20px 20px white; -moz-box-shadow: inset 0 0 20px 20px white; box-shadow: inset 0 0 20px 20px white; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }
div#search input#q:focus { outline-offset: 1px; }
input#q:focus { font-weight: 600; color: #444; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }
div#search input#q::-webkit-input-placeholder { font-size: 14px; }
div#search input#q:-moz-placeholder { font-size: 14px; }
div#search input#q::-moz-placeholder { font-size: 14px; }
div#search input#q:-ms-input-placeholder { font-size: 14px; }
div#search input#q::-ms-input-placeholder { font-size: 14px; }
div#search input#q::placeholder { font-size: 14px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
<form action="#" method="get" id="sform" name="sform">
<input id="q" type="text" placeholder="Search...">
<a onclick="if ($('#search input#q').val().length > 3) {document.sform.submit()}else if($('input#q').width() == 0){$('#search input').height('40px').animate({width:'80%'},350);}else{$('#search input').focus();}" rel="nofollow"></a>
</form>
</div>
Tick the border-bottom on/off on the input and watch the padding be applied/unapplied
Am I going crazy or is this what should happen? I mean, personally I'd think it'd be the other way round, padding enables border.
Also if it helps, Chrome 68 Win10.
I am using following code and code work fine. but i wanna that when user click on search button then search button will also show like stackoverflow search bar has.
HTML :-
<form>
<input type="text" name="search" placeholder="Search..">
</form>
CSS
input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Follow these steps
Create a button
Place that button on the search bar
set display property of that button to none
now whenever you focus on the search bar, change display property of that button to block
try implementing this code on your own first ...
input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 90%;
}
input[type=text]:focus + .but{
display: block;
}
.but{
cursor:pointer;
width: 100px;
height: 50px;
position: absolute;
right:5px;
top:5px;
display:none;
}
<form>
<input type="text" name="search" placeholder="Search.."><input class="but" type="button" value = "search">
</form>
I'm creating a webpage for my internship and i need a login and password form. I animated the text boxes like this:
input[type=text] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
<input type="text" name="username" placeholder="User.." size="30" />
And then I inserted the table in a div and did the same thing to the password
#login {
position: absolute;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
right:350px;
bottom:5px;
height: 200px;
width:200px;
}
input[type=text] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
input[type=password] {
z-index: 10;
width: 30px;
position: absolute;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
display: block;
height: 30px;
}
input[type=password]:focus {
width: 130px;
}
<div id="login">
<form name="frmLogin" method="post" action="">
<br><br>
<table width="100" align="center">
<tr>
<td>Username:</td>
<td><input type="text" name="username" placeholder="User.." size="30" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
</tr>
</table>
<input type="hidden" name="acao" value="login" />
</form>
So now you can see my problem in the snippet, the login and password forms are overlaying each other and i want to have a little space between them.
#login {
/*position: absolute;*/
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
right:350px;
bottom:5px;
height: 200px;
width:200px;
}
input[type=text] {
z-index: 10;
width: 30px;
/*position: absolute;*/
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
input[type=password] {
z-index: 10;
width: 30px;
/*position: absolute;*/
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
display: block;
height: 30px;
}
input[type=password]:focus {
width: 130px;
}
<div id="login">
<form name="frmLogin" method="post" action="">
<br><br>
<table width="100" align="center">
<tr>
<td>Username:</td>
<td><input type="text" name="username" placeholder="User.." size="30" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
</tr>
</table>
<input type="hidden" name="acao" value="login" />
</form>
The problem here is position:absolute. Depending on your usage, you can make it work with position absolute as well, But you will have to declare height. For now, I've just removed the position. Hope this helps.
Remove position absolute from both input css
#login {
position: absolute;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
right:350px;
bottom:5px;
height: 200px;
width:200px;
}
input[type=text] {
z-index: 10;
width: 30px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
height: 30px;
display: block;
}
input[type=text]:focus {
width: 130px;
}
input[type=password] {
z-index: 10;
width: 30px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
display: block;
height: 30px;
}
input[type=password]:focus {
width: 130px;
}
<div id="login">
<form name="frmLogin" method="post" action="">
<br><br>
<table width="100" align="center">
<tr>
<td>Username:</td>
<td><input type="text" name="username" placeholder="User.." size="30" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" placeholder="Pass.." size="30" /></td>
</tr>
</table>
<input type="hidden" name="acao" value="login" />
</form>
You can either remove the position:absolute, position:absolute makes your elements get out of the normal positioning on the page. In this case it removed the spacing between them and placed the input boxes lower than the table lables.
If you want that, you can fix this by changing the margin of your password field like Keerthana Prabhakaran mentioned in the comment.
input[type=text] {
margin-left: 63%;
margin-top: -100%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 150px;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
even after puttin margin-top -100% the search box is not going up. it stopped going up after -10%. Any help would be highly appreciated. Thanks in advance. :)
Use "position:relative" and "top:-100px". It will move your search box to move up. You can increase the 'top' value as you need.
input[type=text] {
margin-left: 63%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: relative;
top: -100px;
}
input[type=text]:focus {
width: 150px;
}