What's the easiest way to remove the border lines of a <fieldset>?
I mean a cross-browser solution... is that possible ?
fieldset {
border: 0;
}
fieldset {
border:0 none;
}
(In regards to Marko's comment)
As far as positioning/styling the <legend>, I hide the <legend> (still put one in there just to be semantic), and position/style an <h2> instead. I find this setup gives me nice styling options for my fieldsets.
JSFiddle Link: http://jsfiddle.net/axYQs/
fieldset {
border: 2px solid gray;
padding: 1em;
float: left;
font-family: Arial;
}
legend {
display: none;
}
h2 {
border-bottom: 2px solid gray;
margin: 1em 0;
}
p {
margin: 1em 0;
}
<fieldset>
<legend>Enter Name</legend>
<h2>Enter Name</h2>
<p>
<label for="name">Name:</label>
<br />
<input type="text" name="firstname" id="name"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</fieldset>
Here is a quick easy effective way to style it..
assign a class or id to the fieldset element then style it in css.
<fieldset class="fieldset">
or
<fieldset id="fieldset">
css.fieldset {
border: none;
}
or
fieldset {
border: none;
}
Related
I am trying to make an HTML div that contain input tags, whose label is just above it. There are several of these in the div. Ideally, I would like a small gap between these pairs. Everything is laid out vertically. When the Browser loads the page, all the items are equally spaced out. I've been trying to adjust margins, and it just doesn't work.
Here is an example:
#label_style {
display: block;
margin: 4px;
color: blue;
}
#input_style {
margin: 4px;
height: 10px;
}
<div id="left_col" style="height:400px;align=left">
<article>
<h3 id="myHeader">Customer</h3>
<h4><label id="label_style">Company:</label></h4>
<h4><input id="input_style" type="text" name="company" value="ACME" maxlength="15"></h4>
<h4><label id="label_style" style="margin:4">Street:</label></h4>
<h4><input id="input_style" style="margin:4" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4>
</article>
</div>
Appreciate any help with this. I am an HTML beginner. Thanks!
The spacing you got comes from the h4 tags.
Just select them and change the margin.
I would recommend adding class to those h4's so you can select the h4 label and the h4 input on different css rules.
For this kind of things use the dev tools of your browser so you can see where the space comes from.
#label_style {
display: block;
margin: 4px;
color: blue;
}
#input_style {
margin: 4px;
height: 10px;
}
h4 {
margin: 0;
}
<div id="left_col" style="height:400px;align=left">
<article>
<h3 id="myHeader">Customer</h3>
<h4><label id="label_style">Company:</label></h4>
<h4><input id="input_style" type="text" name="company" value="ACME" maxlength="15"></h4>
<h4><label id="label_style" style="margin:4">Street:</label></h4>
<h4><input id="input_style" style="margin:4" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4>
</article>
</div>
You should reset the margins of the h3, h4 tags.
h3, h4 {
margin: 0;
}
Remember: #IDs must be unique. You can use .classes.
You can set CSS styles through the h3, h4 tags.
#left_col {
border: solid 1px #ccc;
padding: 5px;
}
#left_col h3 {
background-color: inherit;
color: #444;
}
h3, h4 {
margin: 0;
}
h4 label {
background-color: inherit;
color: blue;
display: block;
margin: 5px 0;
}
h4 input[type=text] {
margin: 4px 0;
padding: 5px;
}
<div id="left_col">
<article>
<h3>Customer</h3>
<h4><label>Company:</label></h4>
<h4><input id="txtCompany" type="text" name="company" value="ACME" maxlength="15"></h4>
<h4><label>Street:</label></h4>
<h4><input id="txtStreet" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4>
</article>
</div>
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I've the following HTML
<form>>
<div class="form-group">
<div class="search-col">
<input type="text" class="form-control">
</div>
<div class="search-col">
<input type="text" class="form-control" >
</div>
</div>
</form>
<form>>
<div class="form-group">
<div class="search-col1">
<input type="text" class="form-control">
</div>
<div class="search-col1">
<input type="text" class="form-control" >
</div>
</div>
</form>
I want to over-ride the behaviour of form-group and form-control of class search-col, but not of search-col1. How can I do that?
this is what I'm trying
.form-group .form-control .search-col{
outline: none;
background-image: none;
-webkit-background-size: none;
-webkit-box-shadow: none;
-webkit-transition-duration: none;
}
Your order is wrong on your selectors. It should be:
.form-group .search-col .form-control {...}
CSS targets in the order of the parent/child relationship of the DOM elements. This is basically saying style the .form-control class inside of the .search-col class that is inside of the .form-group class.
Your HTML structure does not match your CSS selector.
It should be:
.form-group .search-col { ... }
Or, for that matter, it could even be:
.search-col { ... }
Are you trying to style the individual containers? As others have pointed out ensure the order of the selectors is correct. You shouldn't really have to 'override' anything, as the styles are not the same in each section. I've included a sample image below.
.form-group {
background-color: #ccc;
padding: 20px;
}
.form-group {
padding: 10px;
margin: 5px;
border: 2px solid black;
}
.form-control {
background-color: #abc;
}
/* Notice how each class gives a different style */
.search-col {
background-color: #75AD63;
padding: 10px;
}
.search-col1 {
background-color: #A1D490;
background-origin: ;
padding: 10px
}
If you want to override a specific element which is a child of another div, you can use the right angle bracket to select them like I did below. The image connected is the output.
.form-group > .search-col > .form-control {
background-color: red;
}
Example Styling
Notice how I didn't change the original style of the form-control class.
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
How to cancel the blur effect of the HTML textbox when focus on it?
<input type='text' style="background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; "></input>
You have to use CSS on the input element on focus to eliminate that "blur" effect that you're talking about. Take a look at this JSFiddle for an example.
http://jsfiddle.net/qfr8eng1/1/
HTML:
<input type="text" id="noeffect" value="look at me!"/>
CSS:
#noeffect
{
background-color: #33ccff;
color: #AD8C08;
border: 1px solid #ffffff;
}
#noeffect:focus
{
outline: none;
}
try it......
.onfocus { background-color:#33ccff; color:#AD8C08; border:1px solid #ffffff; }
.onfocus:focus { background:none; }
<input type='text' class="onfocus"></input>