I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
Related
I created a to-do list with jQuery (see CodePen). I wanted the '+' button to be joined with the input box in which you add a to-do list item and for the two to be the same height.
Getting the button to match took a lot of trial and error with the padding. Setting its height to 1.5em to match the input box didn't work, even after setting it to box-sizing: border-box.
Is there a more efficient, accurate way to achieve this?
Here is the relevant CSS:
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
height: 1.5em;
}
.button {
/* Needed to display button next to input box */
display: inline-block;
vertical-align: bottom;
box-shadow: inset 0px 1px 0 0 #fff;
/* Starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
font-size: 0.7em;
font-weight: bold;
/* First value sets top and bottom padding; second value sets right and left */
padding: 0.53em 0.7em;
text-shadow: 0 1px #fff;
text-align: center;
color: grey;
}
And HTML:
<form name="listForm">
<input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>
If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
</div>
If you want to implement it yourself, you need to put the input and button inside the form. To set their height to be equal, you can set the height of the button to be equal to the height input (1.6 em) + padding of the input (1px top + 1px bottom = 2px):
input[type="text"] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
}
button.button {
margin-left: -30px;
height: -webkit-calc(1.6em + 2px);
height: calc(1.6em + 2px);
width:25px;
color: grey;
border:none;
}
<form name="listForm">
<input type="text" name="listItem" placeholder="Add new">
<button class="button">+</button>
</form>
reduce the width of the input by 1 em. And set button to float right, It should work.
Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>
I am trying to remove a border from a input text field for my contact form.
Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.
I tried my best to mess around with the CSS to make it work, but somehow its not working.
HTML
<section id="contact">
<div class="container">
<h3 class="contact-section-title">Need advice?</h3>
<p class="contact-section-sub-title-form">Drop me an email below.</p
<div class="grid-row col-2">
<div class="grid-unit3">
<form name="form1" method="post" action="contact.php" >
<input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
<input name="cf_email" placeholder="What is your email? (Eg: johndoe#johndoe.com)" type="email" required />
<textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
<button class="submit" type="submit">Send email</button>
<br><Br><br><Br>
</form>
</div><!--class="email" type="email"-->
</div>
</div>
</section>
JSFiddle
Would appreciate some solid help on this. Don't know where to go from here.
Thank you.
Changes I made ->
border:0px solid #58B9FA;
line 105.
The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:
input {
border: 0
}
Updated Fiddle
Changed the border property in css from following
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:1px solid #58B9FA; }
to
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:0px solid #58B9FA; }
set border: none; or border:0 in your input css
FIDDLE
I want to set the width of the fieldset of this field and then have the wrapper and input box be fluid to take up the available space.
This is how far I have got with a bit of help on here:
.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }
<ul>
<li>
<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">
</div>
</div>
</li></ul>
When I set the wrapper to 100% it stretches the whole way across, rather than the whole way across minus the width of the fieldset.
This is what I am trying to achieve for a fluid width site:
Input box fill up available space?
Add
input.field{width:100%}
.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }
You can adjust the width of label and input accordingly.
Demo http://jsfiddle.net/cskQ8/38/
New update
input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0;
overflow: hidden;}
label{width:200px; display:inline-block; float:left}
Check the updated demo here
Yup, of course it does you've floated the button right taking it out of the document flow. You'll have to set right padding on the container for the input (not the fieldwrapper) to make up for the elements to the right of it.
.containingDiv{padding-right:75px;}
.fieldwrapper{width:100%;}
If you structure your CSS and markup in a more semantic manner now, future you will be very grateful. Definition lists are an appropriate place to start:
<dl class="form-container clearfix">
<dt><label for="sender">Sender email address</label></dt>
<dd><input placeholder="Email" type="text" value="" /></dd>
</dl>
And CSS (remember to include a clearfix):
.form-container { /*just whatever styles you had applied*/}
/*label container, fixed width*/
.form-container>dt {float:left; width:150px;}
/*input container, defaults to width:auto*/
.form-container>dd { margin-left:150px; }
/*box-sizing property is the best thing since sliced bread*/
.form-container input[type=text] {width:100%;box-sizing:border-box;padding:4px;}
Fiddled, try resizing the result frame and see how fluid it is!
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.