Maybe it's a strange question, but is it possible to decorate the input field bottom-right corner to have these two narrow lines, which are default in the textarea field? So it's only about the decoration, no need for the same functionality.
Pen: https://codepen.io/anon/pen/wxqpXK
input {
border-top: none;
border-left: none;
border-right: none;
}
<input type="text" placeholder="Input text">
<textarea name="" id="" cols="30" rows="10"></textarea>
.resizable-input {
/* make resizable */
overflow-x: hidden;
resize: horizontal;
display: inline-block;
/* no extra spaces */
padding: 0;
margin: 0;
white-space: nowrap;
/* default widths */
width: 10em;
min-width: 2em;
max-width: 30em;
}
/* let <input> assume the size of the wrapper */
.resizable-input > input {
width: 100%;
box-sizing: border-box;
margin: 0;
}
/* add a visible handle */
.resizable-input > span {
display: inline-block;
vertical-align: bottom;
margin-left: -16px;
width: 16px;
height: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
cursor: ew-resize;
}
<span class="resizable-input"><input type="text" /><span>
Maybe this could help!! :)
Related
I'm trying to put an image next to the form. I tried using inline-block and float method, but all suggestions I tried just messed up the contents. How can I put the image on the left side of the form?
My code is below:
contactContainer {
display: block;
text-align: center;
border-radius: 2px;
background-color: #f2f2f2;
padding: 20px;
}
.contactContainer form {
display: inline-block;
margin: 30px auto;
text-align: left;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type=Text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=Submit] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type=Submit]:hover {
background-color: white;
color: gray;
}
.twoContainer{
display: flex;
}
.twoContainer img {
width: 500px;
}
<div class="twoContainer">
<img src="images/tour2.jpg" alt="contact image">
<div class="contactContainer">
<form action="https://formspree.io/lyndall#lyndallwalker.com" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe">
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder=" " style="height:200px"></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
Thank you in advance!
You need to add another div for the image but taking it out of
The contactContainer div. Then you'll wrap both of them (the image in a new div and the contact container div) in a third div (for example lets call it container). You want to remove the display properties that you have applied and you will give the container div this property
.container{
Display: flex;
}
If the image doesnt size ok you can try giving it a width of 50% and if not you can remove the img tag and apply it as an image background to the image Div.
.imagediv {
Width: 50%;
Background-image: url("yourimage.png");
}
Something like this should do it
You just need to set position: absolute to .contactContainer form and right:0 You can remove display: inline-block. It'll do the trick.
Here
HTML
<div class="twoContainer">
<img src="https://images.unsplash.com/photo-1581264296947-5a26af1aff18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="contact image" />
<div class="contactContainer">
<form
action="https://formspree.io/lyndall#lyndallwalker.com"
method="POST"
>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe" />
<label for="subject">Message</label>
<textarea
id="subject"
name="subject"
placeholder=" "
style="height: 200px"
></textarea>
<div class="buttonHolder">
<input type="submit" value="Submit" />
</div>
</form>
</div>
</div>
CSS
.contactContainer form {
position: absolute;
right: 0;
margin: 30px auto;
text-align: left;
margin-left: auto;
}
.contactContainer img {
display: inline-block;
width: 500px;
}
.buttonHolder {
text-align: center;
}
input[type="Text"],
select,
textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 2px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type="Submit"] {
background-color: gray;
color: white;
padding: 12px 20px;
border: none;
border-radius: 2px;
cursor: pointer;
align-items: center;
}
input[type="Submit"]:hover {
background-color: white;
color: gray;
}
.twoContainer {
display: flex;
flex-direction: row;
}
I am trying to create a custom div with input text and two buttons inside it as shown below.
But when i resize the screen it becomes like this
Is there a way to avoid the two buttons to come down ? Instead it should remain inside the original div.
Here's the code i tried:
.searchBar {
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
display: inline-block;
border-radius:4px ;
background: #FFFFFF;
width: 70%;height: 32px;
position: relative;
left: 60px;
overflow: inherit;
}
.search_field input {
width: 89%;
padding: 0;
border-top-left-radius: 4px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border:1px inset red;
}
.search_field input:focus {
outline-color: transparent;
outline-style: none;
}
.search_field button {
border: none;
background: none;
}
<div id="searchBar" class="searchBar">
<div class="search_field">
<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
<button id="btn1" hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>
<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
</div>
</div>
Any help is appreciated. Thanks
You can use calc to calculate the width of your input element relative to your buttons:
width: calc(100% - 100px);
Just make sure the width of your buttons is taken of the 100%. In SASS it could look like this:
$buttons: 50px;
width: calc(100% - #{$buttons * 2});
Below is a simplified implementation. I still have the % values as a fallback for older browsers - but that's more a habit than necessity as every major browser supports calc, even IE9 and onward.
input, button {
float: left;
height: 50px;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
}
input {
width: 70%;
width: calc(100% - 100px);
padding: 10px;
}
button {
/* Note that this width is equal to 100%
/* minus the percentage width of the input
/* divided by the amount of buttons. */
width: 15%;
width: 50px;
line-height: 50px;
}
/* This rule is just to make sure your images don't decide the buttons width */
button img {
max-width: 100%;
display: inline-block;
}
<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>
Please try this instead of your styles:
.searchBar{
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
border-radius:4px ;
background: #FFFFFF;
position: relative;
padding-right: 100px; /* You can change as button width */
}
.search_field input {
width: 100%;
padding: 0;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px #FF0000;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.search_field button {
border: none;
background: none;
position: absolute;
top: 0;
}
.search_field button#btn1 {
right: 50px; /* Change as your requirement */
}
.search_field button#btn2 {
right: 0; /* Change as your requirement */
}
Why does my cursor start top right in this example?
See when I click inside the field, it's top right then when I type it moves to the centre. Any ideas why?
http://jsfiddle.net/2Ltm5adw/
HTML:
<label class="input">
<span>Email address</span>
<input type="text" />
</label>
CSS:
input, select, textarea {
line-height:50px;
width:100%;
padding-left:20px;
display: block;
}
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input, .input textarea, .input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
line-height: 50px;
}
Because of the line-height. Replace it with height:
input,
select,
textarea {
border: 2px solid $gray-lighter;
border-bottom: 1px solid $gray-lighter;
border-top: 1px solid $gray-lighter;
height: 50px;
/*replace with height*/
width: 100%;
padding-left: 20px;
background: $white;
display: block;
}
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input,
.input textarea,
.input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
height: 50px;
/*replace height*/
}
<label class="input">
<span>Email address</span>
<input type="text" />
</label>
Demo
It's because of line-height. try height instead line-height.It works fine
.input input, .input textarea, .input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
height: 50px;
}
Just remove line-height from inputs and replace them with padding: 20px 7px;
.input span {
position: absolute;
z-index: 1;
cursor: text;
pointer-events: none;
color: #999;
/* Input padding + input border */
padding: 7px;
/* Firefox does not respond well to different line heights. Use padding instead. */
line-height: 50px;
/* This gives a little gap between the cursor and the label */
margin-left: 2px;
}
.input input,
.input textarea,
.input select {
z-index: 0;
padding: 6px;
margin: 0;
font: inherit;
padding: 20px 7px;
}
<label class="input">
<span>Email address</span>
<input type="text" />
</label>
Whats wrong with this ? Saves mucking around
<label for="emailID">Email Address : </label>
<input type="email" id="emailID" placeholder="Your Email Address"/>
And stylable.
#emailID {width:300px;background-color:green;color:white;border-radius:5px;}
<label for="emailID">Email Address : </label>
<input type="email" id="emailID" placeholder="Your Email Address"/>
Here is your updated JSFiddle Link, Check out your issue has been solved or not !!
Changes Made:
.input span {
padding: 20px;
line-height: 25px;
}
.input input, .input textarea, .input select {
padding: 20px;
height: 25px;
}
I would like to put a label and an input[type=text] on the same line, and I would like for the input's width to fill the remaining width of the containing element, regardless of the length of the label's text (see first image).
I tried to use width: auto; for the input, but it seems to have a static width. I also tried width: 100%;, but that moves the input to a new line (see second image).
How can I achieve this using CSS?
It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/
This works in IE7+ and all modern browsers.
HTML:
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
CSS:
label {
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
input {
width: 100%
}
The reason why overflow: hidden is so magically useful in this instance is explained here.
display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/
This works in IE8+ and all modern browsers:
HTML:
<div class="container">
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
</div>
CSS:
.container {
display: table;
width: 100%
}
label {
display: table-cell;
width: 1px;
white-space: nowrap
}
span {
display: table-cell;
padding: 0 0 0 5px
}
input {
width: 100%
}
That still works for me, but ftr this is how Bootstrap 3 does it (thanks to #morten.c's answer to "Bootstrap full-width text-input within inline-form"). Don't know if it's harder to break than #thirtydot's, or anything. But here it is, and here's a fiddle that also gives a basic example of how to deal with a narrow-screen break point.
HTML:
<form class="responsive">
<input type="text" placeholder="wide input..."/>
<span>
<input type="submit"/>
</span>
</form>
CSS:
form.responsive, form.responsive * {
box-sizing: border-box;
width: 100%;
height: 40px !important; /* specify a height */
}
form.responsive {
position: relative;
display: table;
border-collapse: separate;
/* just to be safe */
border: 0;
padding: 0;
margin: 0;
}
form.responsive > input {
position: relative;
width: 100%;
float:left;
margin-bottom: 0;
display: table-cell;
}
form.responsive span {
position: relative;
width: 1%;
vertical-align: middle;
display: table-cell;
}
form.responsive span input {
margin: 0;
margin-left: -1px;
display: inline-block;
vertical-align: middle;
overflow: visible;
}
I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field.
So, instead of , I'd get .
So, same behavior just some empty space to the right.
I've tried using padding-right, but that doesn't seem to do anything.
Is there a way to do this (or fake it)?
You can provide padding to an input like this:
HTML:
<input type=text id=firstname />
CSS:
input {
width: 250px;
padding: 5px;
}
however I would also add:
input {
width: 250px;
padding: 5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Box sizing makes the input width stay at 250px rather than increase to 260px due to the padding.
For reference.
padding-right works for me in Firefox/Chrome on Windows but not in IE. Welcome to the wonderful world of IE standards non-compliance.
See: http://jsfiddle.net/SfPju/466/
HTML
<input type="text" class="foo" value="abcdefghijklmnopqrstuvwxyz"/>
CSS
.foo
{
padding-right: 20px;
}
padding-right should work. Example linked.
http://jsfiddle.net/8Ged8/
HTML
<div class="FieldElement"><input /></div>
<div class="searchIcon"><input type="submit" /></div>
For Other Browsers:
.FieldElement input {
width: 413px;
border:1px solid #ccc;
padding: 0 2.5em 0 0.5em;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
For IE:
.FieldElement input {
width: 380px;
border:0;
}
.FieldElement {
border:1px solid #ccc;
width: 455px;
}
.searchIcon
{
background: url(searchicon-image-path) no-repeat;
width: 17px;
height: 17px;
text-indent: -999em;
display: inline-block;
left: 432px;
top: 9px;
}
you can solve this, taking the input tag inside a div,
then put the padding property on div tag. This work's for me...
Like this:
<div class="paded">
<input type="text" />
</div>
and css:
.paded{
padding-right: 20px;
}
<input class="form-control search-query input_style" placeholder="Search…" name="" title="Search for:" type="text">
.input_style
{
padding-left:20px;
}