I'd like to add an icon right before the placeholder in a textarea but don't know how to do it.
Here is my code:
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text"
placeholder="">
</textarea>
</div>
</div>
Thank you.
It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome.
You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:
HTML (added span in your code):
<div class="center-part">
<div class="user-input">
<textarea class="share" name="share" type="text" placeholder=" Icon before this"></textarea>
<span class="icon"></span>
</div>
</div>
CSS:
.center-part {
position: relative;
min-height: 50px;
min-width: 200px;
}
.share {
min-height: 50px;
min-width: 200px;
}
.icon {
position: absolute;
background: red;
width: 15px;
height: 15px;
left: 10px;
top: 5px;
}
You can see a demo at Codepen
Related
I want to create forgot password button or <a> tag in inside <input> tag. And I want to right align the <a> tag in <input> but I got stuck.
<div class="form-group">
<label for="password" class="text-gray">Password</label>
<input
type="password"
class="form-control form-field"
placeholder="Password"
/>Forgot
</div>
You can't. But you can make it appear that way with some good CSS and HTML:
.wrapper {
width: 200px;
position: absolute;
}
input {
width: 200px;
position: relative;
}
.icon {
position: absolute;
top: 0;
right: 20px;
width: 20px;
height: 20px;
display: block;
}
<div class="wrapper">
<input placeholder="Forgot on an input! -->" />
<div class="icon">Forgot</div><!-The blue block to the right-->
</div>
<div contenteditable="true">
This is editable
Link
</div>
To be able to do that the best way is a contenteditable div. As it is editable and a div you can use the html markup here.
I'm looking to create the desired styling in the photo shown. Having trouble getting the custom SVGs I created to be inline with the text field. How would I go about creating this effect?
Here's a snippet of the code I'm using at the minute, where am I going wrong?
I'm mostly using the JQM library if that is of any help.
<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
<img src="img/icon/regicons/usernumber.svg">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Ensure that the <input/> has the same height as your <image/> and position it at top of it's parent element.
height: 32px; box-sizing: border-box;
absolute; top: 0;
Snippet:
input {
height: 32px;
box-sizing: border-box;
position: absolute;
top: 0;
}
.box2 {
display: inline-block;
position:relative;
width: 40vw;
}
<div class="box2" style="">
<img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
<input type="text" name="userNo" id="userNo" placeholder="Number" required>
</div>
I would use a flexbox, which is responsive by nature.
.box2 {
display: flex;
background-color: lightgrey;
align-items: center; /* Vertical alignment */
}
<div class="box2" style="position:relative; width: 40vw;">
<img src="https://via.placeholder.com/50x50/00ff00">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
I have a button with a search icon background image but I am not able to add a margin-bottom to align the text area with the button. Why does adding a margin-bottom to the button not do anything? Or what is the correct way to align the textarea with the button?
.input-area {
width: 100%;
height: 46px;
}
.parse-text-button {
background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat;
width: 24px;
height: 24px;
border: none;
margin-bottom: 10px;
}
<div class="input-area">
<textarea class="input" placeholder="Enter text here"></textarea>
<button class="parse-text-button" type="submit"></button>
</div>
If you want to be able to manually position the second element, I would recommend using position: relative in conjunction with a negative top. This allows full control over exactly where the image sits:
.input-area {
width: 100%;
height: 46px;
}
.parse-text-button {
background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat;
width: 24px;
height: 24px;
border: none;
position: relative;
top: -11px;
}
<div class="input-area">
<textarea class="input" placeholder="Enter text here"></textarea>
<button class="parse-text-button" type="submit"></button>
</div>
Alternatively, you can align the two elements at the top by giving the second element vertical-align: top. This aligns the top of the image to the top of the textarea, though can cause problems if the elements are of differing heights (as in your example).
However, considering your image is a little offset from its bounds, you may opt to use this approach to save one line of code:
.input-area {
width: 100%;
height: 46px;
}
.parse-text-button {
background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat;
width: 24px;
height: 24px;
border: none;
vertical-align: top;
}
<div class="input-area">
<textarea class="input" placeholder="Enter text here"></textarea>
<button class="parse-text-button" type="submit"></button>
</div>
Hope this helps! :)
Use vertical align
.parse-text-button {
background:
url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat;
width: 24px;
height: 24px;
border: none;
margin-bottom: 10px;
vertical-align:top;
}
You can just make both <textarea> and the <button> inline-block so you can use vertical-align: middle which will make both elements vertically centered;
textarea {
display: inline-block;
vertical-align: middle;
}
.parse-text-button {
display: inline-block;
verical-align: middle;
}
also make sure to remove all unecessary margin top or bottom in both elements.
hope that helps
There actually is a margin at the bottom, but its extending below the icon and textarea - you can see it if you check it in the element inspector.
I'm guessing that what you really want to know is how to stop the button from being aligned to the bottom.
You can simply use vertical-align to align it, e.g.
.input-area {
width: 100%;
height: 46px;
}
.parse-text-button {
background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat;
width: 24px;
height: 24px;
border: none;
vertical-align: top; /* align to the top */
margin-top: 4px; /* add a little extra space to the top for 'padding' */
}
<div class="input-area">
<textarea class="input" placeholder="Enter text here"></textarea>
<button class="parse-text-button" type="submit"></button>
</div>
Here the solution
.stylish-input-group .input-group-addon{
background: white !important;
}
.stylish-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div id="imaginary_container">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/2/
The first input has the icond correctly aligned but when I try to make the input tag take up 100% of it's width I can't seem to figure out how to get the icon to align correctly. Any suggestions? I am using the cascade css framework and fontawesome.
<div class="site-body">
<div class="site-center">
<div class="cell">
<form>
<input id="first" value="I am correct!" />
<i class="fa fa-calendar first"></i>
</form>
<form>
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</form>
</div>
</div>
</div>
form {
margin-top: 30px;
}
#first {
width: 90%;
vertical-align: middle;
}
.first {
position: relative;
left: -30px;
}
#second {
width: 100%;
vertical-align: middle;
}
.second {
position: relative;
left: -30px;
}
EDIT: I need the input to take up 100% of the width because I have content below it that also takes up 100% of the width and if I set the input to 90% then it looks funny compared to the content below it.
I would wrap the input tag in a 'div' tag:
HTML
<div class="inputCont">
<input id="second" value="I am a bit messed up!" />
<i class="fa fa-calendar second"></i>
</div>
CSS
.inputCont {
position: relative;
width: 100%;
}
.second {
position: absolute;
right: 4px;
top: 8px;
}
Here's an updated jsFiddle
I have a form input with a label next to it, like this:
<div id="loginbox">
<form>
<div>
<span>Username</span>
<input type="text">
</div>
<div>
<span>Password</span>
<input type="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Then I have some CSS that sets up the width of the login box and the span fields, like so:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox span {
display: inline-block;
width: 80px;
text-align: right;
}
Here is the jsfiddle for this code:
http://jsfiddle.net/7TNNq/
Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?
You could put
#loginbox div input {
width: 70%;
}
it will expand to the edge of the div, but I'm sure there's a better way to go about it.
Hope this helps
See: http://jsfiddle.net/thirtydot/tgGLv/
CSS:
#loginbox {
border: 1px solid black;
width: 300px;
}
#loginbox label {
float: left;
width: 80px;
}
#loginbox span {
display: block;
overflow: hidden;
padding: 0 4px 0 0;
}
#loginbox span input {
width: 100%;
}
HTML:
<div id="loginbox">
<form>
<div>
<label>Username</label>
<span><input type="text"></span>
</div>
<div>
<label>Password</label>
<span><input type="password"></span>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
Here it is.
http://jsfiddle.net/7TNNq/35/
Or you can set fixed width as #spike suggested.