I have some code here that creates an animated search bar:
<html>
<head>
<style>
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%;
}
</style>
</head>
<body>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Whenever somebody clicks on it, the search bar expands and lets the user type the keyword(s). How would I make it so that when the user clicks on the search bar, it waits (e.g 1 secs) for the search bar to expand and then redirects to a URL. Do I change the input[type=text] to input[type=code] and do the same with input[type=text]:focus???? Please don't give too complicated answers and I am just a beginner. I looked up most directions to insert the code but my website does not support the site.com/?search=keywords. Please help!!
Thanks,
- Will
Maybe with JS :
<form>
<input type="text" name="search" placeholder="Search.." onClick="redirect()">
</form>
And :
<script>
function redirect() {
setTimeout(function(){
window.location.replace("http://stackoverflow.com");
}, 1000);
}
</script>
You can use the css propert for transition, "transition-delay" here is the code example. Here is a jsfiddle
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;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
input[type=text]:focus {
width: 100%;
}
Related
I currently have a form with 1 button, and if I try to add another button the whole css gets screwed.
This is how I want it to look like: http://prntscr.com/gfuvi8
But if add this line under the submit button <i class="fa fa-refresh"></i> Fetch Exchange
This is what I get : http://prntscr.com/gfuwka
.tablesection {
padding: 20px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background: #ffffff;
}
.tablesection label {
width: calc(50% - 10px);
float: left;
margin: 0px 0px 10px 0px;
}
.tablesection label:nth-child(odd) {
margin: 0px 20px 10px 0px;
}
.tablesection input, .tablesection select, .tablesection textarea {
width: calc(50% - 10px);
margin: 0px 0px 20px 0px;
padding: 10px;
display: block;
float: left;
border: 1px solid #cecece;
-webkit-border-radius: 0;
border-radius: 0;
}
.tablesection textarea {
resize: vertical;
}
.tablesection input:nth-child(odd), .tablesection select:nth-child(odd) {
margin: 0px 20px 20px 0px;
}
.tablesection input {
padding: 11px 10px;
width: calc(50% - 10px);
}
.tablesection input.submit {
width: auto;
border: 0px;
margin: 0px 0px 0px 0px;
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: none;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
clear: both;
}
.tablesection input.submit:hover {
background: #4d758d;
}
.tablesection input.submit::before {
display: block;
content: ' ';
clear: both;
}
<div class="tablesection">
<form action="" method="post">
<label for="usd">USD</label>
<label for="cad">CAD</label>
<input id="usd" type="text" name="usd" value="<?php echo $siteUsd; ?>" maxlength="10" required="required" />
<input id="cad" type="text" name="cad" value="<?php echo $siteCad; ?>" maxlength="10" required="required" />
<label for="gbp">GBP</label>
<label for="eur">EUR</label>
<input id="gbp" type="text" name="gbp" value="<?php echo $siteGbp; ?>" maxlength="10" required="required" />
<input id="eur" type="text" name="eur" value="<?php echo $siteEur; ?>" maxlength="10" required="required" />
<label for="aud">AUD</label>
<label for=""></label>
<input id="aud" type="text" name="aud" value="<?php echo $siteAud; ?>" maxlength="10" required="required" />
<div class="clear">
</div>
<input type="submit" class="submit" value="Update Exchange Rates" />
<i class="fa fa-refresh"></i> Fetch Exchange
</form>
</div>
.content a.button:first-of-type {
margin: 20px 0px 0px 0px;
}
.content a.button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 0px 0px 16px;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.content a.button:hover {
background: #4d758d;
}
.content a.button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
when there are just 2 buttons like this :
<i class="fa fa-search"></i> Search Coupons
<i class="fa fa-plus"></i> Add Coupon
then its fine and they're near each other the problem is at form
The input.submit element isn't floated, while the a.button is. This pushes the a.button to be below the input.submit, and the margins are not consistent so they wouldn't line up if this wasn't happening. I'll suggest two ways to fix it, one minimal (only two css attributes changed), and one that I think is easier to read and maintain but changes the structure of your CSS somewhat.
For either way, I suggest changing the margins. Putting the 16px margin on the right eliminates the need for removing it from the first element with a separate rule, and margins that overflow the containing element don't matter as they aren't included when calculating width and height.
Minimal version
Step 1: set the input.submit to float: left, like the .button
Step 2: change the margin for input.submit to match the .button, or vice versa,
eg, input.submit { margin: 20px 16px 0px 0px; }`
.tablesection input.submit {
width: auto;
border: 0px;
margin: 20px 16px 0px 0px; /* copy the a.button margins */
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left; /* left instead of none keeps subsequent floats on the same line */
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
clear: both;
}
That'll get them inline, after that you'll probably want to set both to a consistent height.
Better (in my opinion) version
You have a lot of shared styles between input.submit and a.button - You may consider combining these into a common .button class (note the absence of a tag in this selector, this means the rule applies to anything with the class).
Here I would set a consistent float: left; and consistent margins (eg 20px 16px 0px 0px)
If you still need to do specific styles for input.submit, you can give the element both classes and they will be applied separately.
.content .button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 16px 0px 0px;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.content .button:hover {
background: #4d758d;
}
.content .button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
.tablesection input.submit {
/* Styles that are unique to input.submit */
}
<div class ="content">
<div class="tablesection">
<input type="submit" class="button submit" value="Update Exchange Rates">
<a href="?do=fetch" class="button">
<i class="fa fa-refresh"></i>
Fetch Exchange
</a>
</div>
</div>
EDIT: Both of these solutions share a flaw, which is that float elements do not affect the height of their container. To get around this, you can either place a dummy element after them to pad the container, eg: <div style="height:60px;"></div>. The important thing in this method is that the height of the dummy div be the same as the height + top margin of the floated elements.
Alternatively, you can remove the float:left altogether and set both to display:inline-block instead, which is much easier to work with than floats when doing the layout.
You can make their positions relative and add a float style:
.btn-float {
position: relative;
width: auto;
float: left;
padding-left: 15px;
}
<input class="btn-left" type="submit" class="submit" value="Update Exchange Rates" />
<a class="btn-right" href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
.button {
width: 23%;
display: block;
text-align: center;
line-height: 3rem;
height: 3rem;
font-size: 1.2rem;
border: 1px solid #ccc;
background: #fafafa;
}
.button-container{
margin-bottom: 20px;
width: 100%;
}
.button-container::after{
content: '';
display: block;
visibility: hidden;
clear: both;
}
.button-float{
margin-left: 2%;
float: left;
}
<div class="button-container">
<button class="button button-float">BTN-1</button>
<button class="button button-float">BTN-2</button>
</div>
<div class="button-container">
<i class="fa fa-refresh"></i> Fetch Exchange
<i class="fa fa-refresh"></i> Fetch Exchange
</div>
I think i know where is wrong.
You should wrap those two buttons in a dive or something else, and set float left, then clear the float on the DIV.
if you using bootstrap, you can just wrap those buttons in a col-md-12
The goal is to let button float, then clear the float on its father container.
added
OK, just add .button-container,.button-container::after,.button-float in your css file, and wrap your 2 btns with div with .button-container class, add .button-float class to your 2 btns, that will do.
Hope this can help you.
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>
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>
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;
}
I've got this bit of HTML:
<div id="content">
<h1 id="prompt">What's on your mind?</h1>
<form action="post.php" method="POST" id="message-form">
<textarea placeholder="Type in anything you want to share. Anything at all."></textarea>
<p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use Markdown formatting.</p>
<input type="submit" class="submit button" value="Share" />
<br class="clearfix" />
</form>
</div>
and this CSS:
/* CSS Reset
-------------------------------------------*/
* {
margin: 0;
padding: 0;
}
.clearfix {
clear: both;
}
/* UI Elements
-------------------------------------------*/
.button {
background-color: #ccc;
background-image: -webkit-linear-gradient(white, #ccc);
background-image: -moz-linear-gradient(white, #ccc);
background-image: -ms-linear-gradient(white, #ccc);
background-image: -o-linear-gradient(white, #ccc);
background-image: linear-gradient(white, #ccc);
border: 1px solid #999;
border-radius: 10px;
color: #333;
cursor: pointer;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
outline: none;
padding: 3px 8px;
text-decoration: none;
}
.button:hover {
border-color: #666;
}
.button:active {
background-color: #bbb;
background-image: -webkit-linear-gradient(#ccc, white);
background-image: -moz-linear-gradient(#ccc, white);
background-image: -ms-linear-gradient(#ccc, white);
background-image: -o-linear-gradient(#ccc, white);
background-image: linear-gradient(#ccc, white);
}
/* Content
-------------------------------------------*/
#content {
margin: 10px;
}
/* Prompt
-------------------------------------------*/
#prompt {
color: #888;
font-weight: normal;
}
/* Message Box
-------------------------------------------*/
#message-form {
width: 600px;
}
#message-form textarea {
border: 1px solid #ccc;
border-radius: 6px;
display: block;
font-family: Georgia, Times New Roman, Times, Serif;
font-size: 16px;
min-height: 100px;
outline: none;
padding: 5px;
resize: vertical;
width: 100%;
-webkit-transition: border-color 0.25s ease-in-out;
-moz-transition: border-color 0.25s ease-in-out;
-ms-transition: border-color 0.25s ease-in-out;
-o-transition: border-color 0.25s ease-in-out;
transition: border-color 0.25s ease-in-out;
}
#message-form textarea:hover {
border-color: #666;
}
#message-form textarea:focus {
border-color: #3bf;
box-shadow: 0 0 5px #3bf;
}
#message-form p {
color: #666;
float: left;
font-size: 13px;
margin: 3px;
}
#message-form .submit {
float: right;
margin-right: 0;
}
What I'm trying to accomplish is to float an element rightwards within a particular amount of space. This works, but there's about 10 pixels' space to the right of the button that don't appear to exist! It's not padding from the parent element, nor margin on the button as far as I can see... so where is it coming from? Below is an image of the problem, and the full code can be found at https://github.com/minitech/MiniTicket. Here's a demo on jsFiddle, too.
Sorry for the overload of code, but I can't seem to reproduce the problem in a simple way.
Keep in mind that setting width: 100% and any amount of horizontal padding will cause your element to have a width beyond 100% (unless it's an input element, in which padding is applied inside of the element).
In your case, your textarea width is 610px. The submit button is properly floated to the far right of your 600px width container.
See: http://jsfiddle.net/Wexcode/KX7wd/1/
Replacement for padding in textarea: http://jsfiddle.net/Wexcode/KX7wd/2/