i am trying to make css for input box in html. i have little knowledge of css can any one please solve my small query. i want different-different style and size for all input box. want no change in html code.
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
No need to change the html.
You can use a wildcard in an attribute selector
According to MDN
[attr*=value] Represents an element with an attribute name of attr the
value of which contains at least one occurrence of string "value" as
substring.
Since your inputs have distinct name properties we can target those.
The names of your inputs are
post_rehub_offers[rehub_multioffer_group][0][multioffer_url]
post_rehub_offers[rehub_multioffer_group][0][multioffer_name]
post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]
So we can target
input[name*="url"]
input[name*="name"]
input[name*="desc"]
And apply whatever styles you want to them like so:
input[name*="url"] {background:red}
input[name*="name"] {background:green}
input[name*="desc"] {background:blue}
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
Write a CSS referring the below example.
<html>
<head>
<style>
input {
width: 100%;
box-sizing: border-box; }
</style>
</head>
</html>
Put this script in the head tag of html.
.input-element-1{
width:300px;
}
.input-element-2{
width:200px;
}
<div class="field">
<div class="input1">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large input-element-1" value="" type="text">
</div>
</div>
<div class="field1">
<div class="input2">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large input-element-2" value="" type="text">
</div>
</div>
Related
I'm making a form and I want the left half of the page to fill up the section. I have tried col-lg-4, changing the CSS width to 100%, nothing is changing the actual input field. I have searched Stack Overflow, but I couldn't find anything that worked. The first picture is what I have, and the second picture is what I was trying to recreate.
<section class="col-md-6">
<form class="form-group row">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail" placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</form>
</section>
set css display property to inline-block and give width 100%
.form-control{
display:inline-block;
width:100%
}
ok first of all you cannot have two elements with the same id, because only the last element will get to have that id and the first one won't
to answer your question try to this in css
.form-group, .form-control {width : 100%;}
I'd rather though you'd give an id to your form and then call these classes as its children, like -#form_id .form-group {...
use bootstrap div as mentioned below and try
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail"
placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</div>
<div class="col-sm-6">
Maps Section Comes Here!
</div>
</div>
</div>
I am trying to achieve this:
But I tried many things still can't. My result is this:
Here is my ASP.NET code:
<div class="row">
<div class="form-group-sm col-sm-4">
<asp:Label runat="server" Text="PD Number"></asp:Label>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><asp:TextBox ID="txtPDNumber1" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber2" CssClass="form-control input-xs" runat="server"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber3" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
</div>
</div>
On top of the page I have:
<style>
.form-control-inline {
position: relative !important;
display: inline !important;
width: 30% !important;
}
</style>
Here is rendered html:
<span>PD Number</span>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><input name="ctl00$MainContent$txtADNumber1" type="text" value="34" id="MainContent_txtAPDNumber1" class="form-control input-sm" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber2" type="text" id="MainContent_txtPDNumber2" class="form-control input-xs" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber3" type="text" id="MainContent_txtPDNumber3" class="form-control input-sm" /></div>
</div>
</div>
How do I adjust to make them inline. Also adjust the width of the textbox.
Have you tried using bootstrap grids. Something like this:
<div class="row">
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber1"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber2"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber3"></div>
</div>
In Bootstrap 3 and Bootstrap 4, there is a class you can add to a form element called form-inline, which will place your input elements on the same row. It's tough to determine from the provided code, but wrapping your input elements with a form tag and adding the form-inline class you might get your desired output.
Note: When a responsive breakpoint is reached, these elements will go be displayed on their own rows.
https://codepen.io/cowanjt/pen/QMZQjv... This will show you the code inaction.
<div class="container">
<div class="row">
<form class="form-inline">
<input type="text" class="form-control" id="exampleInput1" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput2" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput3" placeholder="">
</form>
</div>
</div>
I have following HTML, but I can't get two inputs to be on same line as all buttons.
<div class="well">
<div class="input-group">
<input class="form-control" placeholder="Page path">
<input class="form-control" placeholder="Name">
<div class="input-group-btn">
View
Edit
Delete</div>
</div>
</div>
http://www.bootply.com/Iu7Ic99jm6
Bootstrap makes the width of those input elements 100%. You will need to overwrite that value. Something like this:
.input-group .form-control {
width:45%;
margin-right:5%;
}
See my bootply fork here:
http://www.bootply.com/ApJNHnX5Lv
Place the entire content in a .form-inline <form> tag, and place the input and button sections in .form-group <div>'s :
<div class="well">
<form class="form-inline">
<div class="form-group">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name">
</div>
<div class="form-group">
View
Edit
Delete
</div>
</form>
</div>
see forked bootply -> http://www.bootply.com/xSxTb0xzqh
you could use col divs to force the inputs to be in certain places. in combo with form-inline / form-group like so
Try using class form-inline
<div class="well">
<div class="form-inline">
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name">
View
Edit
Delete
</div>
</div>
</div>
Bootply
How to replace style class with mootools.Consider,
<form>
<div class="form-label">
<label>User ID</label>
</div>
<div class="form-element">
<input type="text" name="userid">
</div>
<div class="form-label">
<label>password</label>
</div>
<div class="form-element">
<input type="text" name="password">
</div>
</form>
Here, I would like to replace style class form-label with form-label-new.
Thanks
$$('.form-label').set('class', 'form-label-new');
completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks!
Here is my code:
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
Would this do the job for you? Please test it on multiple browsers
because it's only tested on FF 3.6, IE 7+
While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.
You can do something along this lines:
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
width: 300px !important;/* added important to override your inline styles*/
display: block !important;
text-align: right !important;
float: left;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
</body>
</html>
The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?