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.
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>
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 3 years ago.
I am trying to create a form with a text input and a submit button. I want the corners to be rounded. It's working correctly on the submit button but not on the text input:
form {
display:flex;
justify-content:flex-start;
}
form input[type="text"] {
padding:5px 10px;
border:1px solid #d7d7d7;
border-right:none;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
form input[type="submit"] {
background:#000;
border:1px solid #000;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
outline:none;
}
<form method="get" action="">
<input name="s" type="text" placeholder="Search">
<input type="submit" value="">
</form>
How can I make it so that the left corners of the text input are rounded off like they are on the submit button?
Try using em instead of %.
form {
display:flex;
justify-content:flex-start;
}
form input[type="text"] {
padding:5px 10px;
border:1px solid #d7d7d7;
border-right:none;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
form input[type="submit"] {
background:#000;
border:1px solid #000;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
outline:none;
}
<form method="get" action="">
<input name="s" type="text" placeholder="Search">
<input type="submit" value="">
</form>
your 50% is calculated based on the width of the element. Since your submit button is very narrow and your text input is much wider, the border radius looks different. You will want to use some other absolute unit, such as px or em.
form {
display:flex;
justify-content:flex-start;
}
form input[type="text"] {
padding:5px 10px;
border:1px solid #d7d7d7;
border-right:none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
form input[type="submit"] {
background:#000;
border:1px solid #000;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
outline:none;
}
<form method="get" action="">
<input name="s" type="text" placeholder="Search">
<input type="submit" value="">
</form>
You should not use percentages if you want a non-square element to have rounded corners. Use an absolute unit, like px or em instead:
form {
display:flex;
justify-content:flex-start;
}
form input[type="text"] {
padding:5px 10px;
border:1px solid #d7d7d7;
border-right:none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
form input[type="submit"] {
background:#000;
border:1px solid #000;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
outline:none;
}
<form method="get" action="">
<input name="s" type="text" placeholder="Search">
<input type="submit" value="">
</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 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
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>