Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.
currently I'm doing something like this, but the sign is out of the inputbox.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.
You probably want this
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Js Fiddle Demo - Basic
Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $ sign, You can add this css as well
.input-group .input-group-addon + .form-control
{
border-left:none;
}
Js Fiddle Demo - Without Border
HTML:
<div class="col-xs-6" >
<div class="left-inner-addon">
<span>$</span>
<input type="text" class="form-control" placeholder="Amount" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<span>$</span>
<input type="search" class="form-control" placeholder="Amount" />
</div>
</div>
CSS:
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 22px;
}
.left-inner-addon span {
position: absolute;
padding: 7px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon span {
position: absolute;
right: 0px;
padding: 7px 12px;
pointer-events: none;
}
jsFiddle
Bootstrap Versions 4 and 5
This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.
To prepend text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="0.00" />
</div>
To append text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="email" />
<div class="input-group-append">
<span class="input-group-text">#gmail.com</span>
</div>
</div>
To change the background color of the added text
.input-group-text
{
background-color:#FFF;
}
You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span. Also you need to add to the input a padding-left value equal to span's width
Related
I saw this pretty from from website.
I decided to make it using bootstrap 4, and I failed because of the space between two html input elements. It is neither padding nor margin, I have no idea what is it. I tried to remove the space several times but failed.
The space between two inputs giving me suffer.
This is HTML
<form action="" method="post">
<div class="form__wrapper">
<input type="email" name="email" class="newsletter" placeholder="Email address"/>
<input type="submit" class="newsletter__button"/>
</div>
</form>
This is CSS
.form__wrapper {
display: inline-block;
position: relative;
}
form {
display: block;
}
form input[type='email'], form input[type='text'] {
cursor: text;
-webkit-font-smoothing: antialiased;
width: 100%;
padding: 9px;
border: 1px solid #E1E0E1;
outline: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.form__wrapper input[type='email'] {
width: 60%;
}
This gap origins from the space between two inline elements in the source code. that is parsed as a blank space.
However, you don't have to deal with this issue - for this case exactly, Bootstrap provides Input Groups. Just use the input-group class as a wrapper for the two form elements and the input-group-added as a wrapper for the button.
You can style the form elements by using a higher specificity in your selectors. The Icon can also be achieved by FontAwesome (see Nisarg Shahs good answer for that). Here is an example:
body {
padding: 2em;
}
.input-group>.form-control,
.input-group .btn {
border-radius: 0;
border-color: #e3e3e3;
text-transform: uppercase;
font-size: .8em;
line-height: 1.95em;
letter-spacing: 2px;
}
.input-group>.form-control {
border-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">></button>
</div>
</div>
It is called an add-on in Bootstrap 4. Here's an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Submit</button>
</div>
</div>
You can combine that with FontAwesome, to get the desired result:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">
<span class="fa fa-angle-right"></span>
</button>
</div>
</div>
Write both of your input tags in the same line. Here I've included the fiddle. You can see the difference. :)
<input type="email" name="email" class="newsletter" placeholder="Email address"/><input type="submit" class="newsletter__button"/>
Bootstrap has this built in:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input class="form-control newsletter" placeholder="Email" type="text">
<div class="input-group-append">
<input class="form-control"t type="submit" class="newsletter__button"/>
</div>
</div>
I'd been trying to change the width of the search box in name="size" of my HTML template but can't do it even when I tried width:.
html:
<form class="form" method = "POST" >
<h1>Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container-fluid form-inline">
<input class="form-control" name = "name" type="text" placeholder="Name"/>
<input class="form-control" name = "size" type="text" placeholder="Size"/>
<button class="form-control fa fa-search" aria-hidden="true"></button>
</div>
</form>
css of the element:
input[name="size"]{
width: 50%;
}
Here's a codepen for better context:
http://codepen.io/tadm123/pen/ZLVWpd
I recommend using this method.
<form class="form" method="POST">
<h1 class="text-center">Soccer Shoes Finder</h1>
<div class="line-separator"></div>
<div class="container ">
<div class="row">
<div class="col-md-4">
<input class="form-control" name="name" type="text" placeholder="Name" />
</div>
<div class="col-md-7">
<input class="form-control" name="size" type="text" placeholder="Size" /></div>
<div class="col-md-1">
<button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
</div>
</div>
</form>
Updated Codepen:
http://codepen.io/hunzaboy/pen/aJJpMK
It's getting overwritten by the bootstrap defaults. Specifically:
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
You need to adjust your selector to fix the cascade:
.form-inline input.form-control[name="size"]{
width: 50%;
}
did you try size attribute?
<input type="text" size="15"/>
The input elements use by default display: inline;, you cannot define a width in elements who using that display, if your change the display to display: inline-block; you will can change the width of your element.
input[name="size"]{
width: 50%;
display: inline-block; /* <--- Here the change */
}
Suppose you have a class-name (defined in HTML) of inputText (name).
Adding these lines will help (clean-way/simple).
.inputText{
//...
width:200px;
transition: width .4s ease-in;
}
.inputText:hover, .inputText:focus{
width:400px;
}
I'm making a site with bootstrap, and when I add border-radius: 4px to inputs/buttons, is adding shadow too.
Check image:
http://i.stack.imgur.com/K9pz8.png
How can I remove this shadow?
Add class="form-control to the input element it will remove shadow inside.
See demo:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
input {
border-radius: 5px;
margin: 10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="input-group">
<input type="text" class="" placeholder="without class">
<input type="text" class="form-control" placeholder="with class">
</div>
</div>
Try this
#usr{
border-radius:4px;
}
<div class="col-md-4"><div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div>
Note: Added class = "form-control".
Demo Here
I am using external CSS for some style ,
my link tag is as follow ,
<link href="<%=request.getContextPath()%>/css2/form.css" rel="stylsheet" TYPE="text/css">
the CSS file has following content
#CHARSET "ISO-8859-1";
legend {
padding: 0;
margin-top:-20px;
margin-left: -20px;
margin-right:-40px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #918D8D;
}
.input-group{
margin-left:15px;
}
and I used these classes in jsp as follow,
<div class="form-group">
<label for="dob" class="control-label col-xs-4">Date Of
Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8 input-group date form_date1" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd">
<input type="text" class="form-control " size="10" name="dob" id="date" ">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
why it is not working , here i am trying to add margine to text box.
Not sure which css you want to apply to your textbox. But if you want to apply input-group to your textbox then update your input tag as mentioned below :
<input type="text" class="form-control input-group" size="10" name="dob" id="date" ">
and apply !important to the margin of css input-group as mentioned below :
.input-group{
margin-left:15px !important;
}
I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.