I currently have:
<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
But the input box still takes up 100% of width.
If I remove the botostrap class form-control then I obviously lose the styling, but the box takes up the 4 character width I intended.
How do I get it to take the width of 4, while also keeping the bootstrap styling?
Its because of .form-control class ,which is bootstrap default class, you have to inherit this class.
for example:-
This is default
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
width: 100%;
}
Use like this:-
<div class="wrap">
<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
<div>
.wrap .form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
/*width: 100%;*/ remove this
}
Hope i'll helps you.
You can simple add new class with class="form-control new-input" like below
html
<input type="text" class="form-control new-input">
Css
.new-input{width:100px}
thats it :)
Add a local styling, somehow like:
<input name="test" type="text" class="form-control" placeholder="Type here" style="width:<size value here>" maxlength="4">
HTML:
<div class="form-group">
<input id="test" name="test" type="text" class="form-control" placeholder="Type here">
</div>
CSS:
.form-group #test{
width:50%!important;
}
Example: jsFiddle
Related
Trying to create a basic website layout for a course (Odin Project). However I noticed that their website design has a perfect box shadow with no light gap. Where as my design no matter how much I try to mess with the box shadow property settings seems to have a small 1-2px gap between the box shadow and input fields. This is very noticeable and sort of ruins the design. I am a novice at CSS and was hoping someone more experienced could direct me to a good solution.
.form-flex-container {
display: flex;
flex-direction: column;
margin-bottom: 40px;
}
input {
width: 215px;
height: 20px;
border-radius: 3px;
border: 1.5px solid #e5e7eb;
}
input[type="text"] {
padding-left: 9px;
}
input:focus {
outline-color: #4a6ed6;
border: none;
box-shadow: 2px 2px 5px #bebebe;
}
label {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #2e3a4b;
margin-bottom: 3px;
/* margin-left: 2px; */
/* float: left; */
}
<form action="post">
<div class="form-row-1">
<div class="form-flex-container">
<label for="first-name">First Name</label>
<input type="text" name="first-name" id="first-name" />
</div>
<div class="form-flex-container">
<label for="last-name">Last Name</label>
<input type="text" name="last-name" id="last-name" />
</div>
</div>
<div class="form-row-2">
<div class="form-flex-container">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="form-flex-container">
<label for="phone-number">Phone Number</label>
<input type="text" name="phone-number" id="phone-number" />
</div>
</div>
<div class="form-row-3">
<div class="form-flex-container">
<label for="password">Password</label>
<input type="text" name="password" id="password" />
</div>
<div class="form-flex-container">
<label for="confirm-password">Confirm Password</label>
<input type="text" name="confirm-password" id="confirm-password" />
</div>
</div>
</form>
I darkened the box shadow so you could see the gap more clearly.
So I discovered what was wrong. Apparently for some reason when I used the property outline-width and outline-color it wasn't actually targeting the outline under the input:focus selector. I had to use the shorthand outline: 1px solid #4a6ed6; to get rid of the gap. So now it works.
See outline property from MDN docs.
Instead of using border: none you can set it to 1.5px solid #4a6ed6 and remove the outline :
input {
width: 215px;
height: 20px;
border-radius: 3px;
border: 1.5px solid #e5e7eb;
}
input:focus {
// outline-color: #4a6ed6;
outline: none;
border: 1.5px solid #4a6ed6;
box-shadow: 2px 2px 5px #bebebe;
}
<form action="post">
<div class="form-row-1">
<div class="form-flex-container">
<input type="text" name="first-name" id="first-name" />
</div>
</div>
</form>
I have a number of inputs of type text that I have placed a border and border-color around. They show up fine in Chrome, but in Safari the border is the color I selected on two sides and a basic blue on the other two sides. There is no problem with the border of a textfield I have in the same page. But a submit button does not have the correct border color either.
HTML:
<label for="email">Email address</label>
<input type="text" id="email" name="email" />
<label for="telephone">Phone number</label>
<input type="text" id="telephone" name="telephone" />
<label for="notes">Notes</label>
<textarea type="textarea" id="notes" name="notes" /></textarea>
<input type="submit" id="submit" value="Send" />
CSS:
input, textarea, {
display: block;
width: 200px;
height: 20px;
margin: 0 !important;
margin-bottom: 10px !important;
padding: 0 !important;
padding: 4px 8px !important;
font-size: 16px;
background-color: lightgrey;
border-width: 2px !important;
border-radius: 4px;
border-color: #001b43;
outline: none;
}
Searching around, I have found a few related problems and solutions and have tried them, but with no joy. For example:
input.text,
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
I passed my question on to a friend. He figured it out quickly. The solution is:
border-style: solid;
I have tried to style these radio buttons with css but i can not figure out why it will not style. I am trying to have a 30px by 30px radio button with a 3px blue border and the inside of the radio button white with a black dot that is the checked one. Any help would be appreciated.
<span class="wpcf7-form-control-wrap RVCategory">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<span class="wpcf7-list-item-label" style="">Motorhome
</span>
<input type="radio" name="RVCategory" value="Motorhome" checked="checked">
</span>
<span class="wpcf7-list-item last">
<span class="wpcf7-list-item-label">Trailer
</span>
<input type="radio" name="RVCategory" value="Trailer">
</span>
</span>
</span>
Hint 1, always include enough code to replicate your problem. Once finding the fiddle it was easily fixed.
Point 1 : Use the label tag and use it corectly. You are using a span where you should be using label. To associate label with a form element use the for attribute with an Id from the form element. It is the label that gives the user something to click on here.
Point 2: Ordering is important with CSS selectors. If your selector is input + label the label tag must come after the input
Point 3: Learn the realtionship with position:releative and position:absolute
Finaly, the solution:
.wpcf7-form-control-wrap.RVCategory {
max-width: 400px;
margin: 94px auto 0 auto;
}
.wpcf7-list-item label {
position: relative;
}
.wpcf7-list-item-label,
.wpcf7-list-item last {
font-size: 20px;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"] {
position: absolute;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"]+label:before {
content: "";
/*Note inline-block*/
display: inline-block;
top: 2px;
height: 14px;
width: 14px;
background: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"]:checked+label:before {
background: #ef8700;
}
<span class="wpcf7-form-control-wrap RVCategory">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<!-- Note the order had changed
and the addition of an id
-->
<input type="radio" name="RVCategory" value="Motorhome" checked="checked" id="rdoMotorHome">
<!--Note the "for" attribute-->
<label class="wpcf7-list-item-label" style="" for="rdoMotorHome">Motorhome</label>
</span>
<span class="wpcf7-list-item last">
<input type="radio" name="RVCategory" value="Trailer" id="rdoTrailer">
<label class="wpcf7-list-item-label" for="rdoTrailer">Trailer</label>
</span>
</span>
</span>
You can change the size but you can't add a border around a radio button with CSS unless you want a square border - and in that case it would be the element around the button, not styled on the button itself. To change the size of the button, your class needs to go with the input tag. Put your class where the inline style is in the example below.
<input type="radio" name="RVCategory" value="Motorhome" checked="checked" style="width:30px;height:30px;">
Below is the code for your reference, this will help you.
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 20px;
}
[type="radio"] + span:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
vertical-align: -0.25em;
border-radius: 10px;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
[type="radio"]:checked + span:before {
background: black;
box-shadow: 0 0 0 0.25em #000;
}
<label for="Motorhome">
<input type="radio" value="Motorhome" name="Test" id="Motorhome"> <span>Motorhome</span>
</label>
<label for="Trailer">
<input type="radio" value="Trailer" name="Test" id="Trailer"> <span>Trailer</span>
</label>
I just cannot seem to figure this out. I need another set of eyes.
I am trying to style my password input box to look/react the same way as my text input boxes.
Here is the HTML:
<fieldset class="contact">
<label for="full_name">Purchasing Account ID:</label>
<input type="text" id="acc_id" name="acc_id" size="13" />
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address" size="13" />
<label for="password">Password:</label>
<input type="password" id="pw" name="pw" size="13" />
</fieldset>
Here is the CSS:
form input[type=text], form input[type=password] {
width: 306px;
background: #f3f3f3;
border-top: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 0;
border-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px 10px;
font-size: 12px;
color: #373737;
-moz-box-shadow:inset 3px 3px 5px #e9e9e9;
-webkit-box-shadow:inset 3px 3px 5px #e9e9e9;
box-shadow:inset 3px 3px 5px #e9e9e9;
}
form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
border: 3px solid #c70000;
}
Any thoughts as to why the password input field is not getting CSS at all? I inspected it with Google Chrome and the CSS is not getting applied at all to the password input field and Firebug shows the same thing.
What if you tried this approach?
Add a css class to your inputs, and then apply the styles via those classes.
http://jsfiddle.net/zr6yB/
<fieldset class="contact">
<label for="full_name">Purchasing Account ID:</label>
<input type="text" id="acc_id" name="acc_id" size="13" class="input-generic" />
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address" size="13" class="input-generic" />
<label for="password">Password:</label>
<input type="password" id="pw" name="pw" size="13" class="input-generic" />
</fieldset>
CSS (abbreviated)
.input-generic {
width: 306px;
...etc...
}
Try this:
.Div_Class_Name input[type=text], .Div_Class_Name input[type=password] {
background:#e5e2b6;
border:2px solid #741a01;
}
Figured it out. The reference for the CSS include was still referencing my live copy and not my development copy.
I have a table with background image shown in my site. The FF and chrome looks normal but not in IE. The background image seems to shift and generate wired result. I was wondering if anyone here can help me out on this one. Please see attached picture. Thanks for the help.
<section>
some html....
<form action="http://localhost/jobSearch/add_project/validate" method="post" accept-charset="utf-8">
<fieldset>
<legend>ADD NEW PROJECT</legend>
<label>Parcel</label>
<input type="text" name="parcel" value="">
<label>Lot Number</label>
<input type="text" name="lot_number" value="">
<label>Block</label>
<input type="text" name="block" value="">
<label>Subdivision</label>
<input type="text" name="subdivision_name" value="">
<label>Section/Phase</label>
<input type="text" name="section_phase" value="">
<input type="submit" name="submit" value="Add Project" id="submit">
</fieldset>
</form>
more html.....
</section>
CSS:
form {
display: block;
}
form fieldset {
font: bold 1.1em helvetica;
}
form label{
float:left;
display:block;
width:140px;
font:bold 1.1em Helvetica;
margin:5px;
}
fieldset{
color:black;
font:bold 1.2em Helvertica;
width:400px;
margin: 20px auto;
padding: 10px;
border:1px solid grey;
background:url('../images/background.jpg');
}
form input {
font-size: .9em;
padding: 4px 6px;
border: solid 1px #AACFE4;
margin: 5px;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form #submit {
cursor: pointer;
font: bold 1em Helvetica;
padding: 4px 2px;
border: solid 1px #AACFE4;
margin: 5px;
width: 100px;
}
Your tags are not properly nested. You open with <form>, but close with </fieldset>. You need to swap the locations of the closing tags in the example below to correct the nesting issue.
<form ...>
<fieldset>
<!-- content removed -->
</form>
</fieldset>