I'm trying to customize the style of the login form, but I can't apply the :focus rule. Could someone be so kind as to explain to me why it's not working? I don't understand what I'm doing wrong, sorry, but I'm new to all this.
/*Label Style*/
.login_form_fields input:focus + label {
color: blue;
}
/*Input Style*/
.login_form_fields input {
border-radius: 2px;
background: #fff;
border: 1px solid #E3E3E3;
}
.login_form_fields input:focus {
border: 1px solid blue;
}
<form id="login-form" method="post">
<div class="login_form_fields uname">
<label for="username">Username o Email:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="login_form_fields pswrd">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button class="login_button" type="submit">Accedi</button>
</form>
</div>
I have this css search form on the left top, above the flags. Please see this LINK
<form action="https://neculaifantanaru.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Cauta in site</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">cauta</button>
</fieldset>
</form>
I made this css:
#site-search {float:right;width:240px;margin:0;padding:0px 0px 0px 0px;font-size:11px;background:#white;}
#site-search LABEL {display:inline-block;font-size:11px;color:#red;}
#site-search INPUT {width:140px;height:22px;margin:90;padding:0px 9px 0px;border-color:#yellow;background:#blueviolet;font-size:11px;}
#site-search BUTTON {width:45px;height:22px;padding:0;margin:90;font-size:11px;line-height:13px;}
I want to change the css above, in order to look like this. LINK 2 So, what should I change on my css for this?
Remove the styles and try with these styles. May be helpful :)
<form action="https://neculaifantanaru.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Cauta in site</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">cauta</button>
</fieldset>
</form>
<style>
fieldset{ border: none;}
input { background-color: #ffff82; border: 1px solid #cccccc; }
button { background-color: #fff; color: blue; font-weight: bold; font-family: sans-sarif; border: none; border-top: 1px solid #0d6295; border-right: 1px solid #0d6295; font-size: 15px; }
</style>
As said in title, the CSS is connected to the page it is on properly. And the styling works in all aspects except for one single form. Below is some CSS for the form followed by the HTML code for the form.
#form2 input {
background: black;
padding: 0px;
border: 1px solid black;
border-radius: 20px;
}
#form2 select {
border: 1px solid black;
border-radius: 20px;
}
<form id="form2" method="post" action="home.php?id=<?php echo $user_id;?>">
</br>
<h2>What would you like to ask? Rant away!</h2>
<input type="text" name="title" placeholder="Write a title" size="92px" />
<textarea cols="70" rows="6" name="content" ;>Description...</textarea><br/>
<select name="topic">
<option> Select Topic</option>
<?php getTopics() ;?>
</select>
<input type="submit" name="sub" value="Post to Timeline" />
</form>
To make this question least confusing, I made a JS Fiddle.
http://jsfiddle.net/hollycotta/27K5V/5/
If you view it in IE, the result is lined up on the right.
If you view it in Chrome, the squares are not lined up on the right side and look messy.
Does anyone know what missing piece will make it line up in Chrome and IE?
I need to keep the div IDs 'Tier3', 'Tier2', and 'Tier1' because I programmatically hide and show them depending on other parts of my form. There is also a lot of javascript that uses the input IDs, etc. Is there a way to make a CSS change only to fix this?
Thank you so much in advance for help, this has left me stumped.
-Holly
Since I need to provide code as well when I link a JS Fiddle, I will paste the CSS here but it is all in the JS Fiddle with the html markup that creates my problem:
#leftRadioButtonOptions {
position: relative;
left : 5px;
top : 65px;
width: 230px;
text-align:right;
}
input[type=radio] {
display:none;
}
input[type=radio] + label{
display:inline-block;
margin:-2px;
padding: 2px 4px 2px 4px;
margin-bottom: 0;
font-size: 10px;
line-height: 12px;
color: transparent;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:white;
color:black;
}
Looks like thing about blank text nodes.
Not a good way to fix it, but adding at the end of each block fixed aligning issue in Chrome.
Actually it's better not to use <br>s, but wrap every line you need into div.
How this ?
I wrapped each item in a div and added this to your original css
.entry {
margin: 0 0 10px 0 ;
}
And the html
<div id="leftRadioButtonOptions">
<div id="Tier3">
<div class="entry">
Overall Status:
<input id="overallGreen" type="radio" />
<label for="overallGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="overallYellow" type="radio" />
<label for="overallYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="overallRed" type="radio" />
<label for="overallRed" style="background-color: red;"><b>R </b></label>
</div>
<div class="entry">
Schedule:
<input id="scheduleGreen" type="radio" />
<label for="scheduleGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="scheduleYellow" type="radio" />
<label for="scheduleYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="scheduleRed" type="radio" />
<label for="scheduleRed" style="background-color: red;"><b>R </b></label>
</div>
<div class="entry">
Risks/Issues/Concern:
<input id="risksGreen" type="radio" />
<label for="risksGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="risksYellow" type="radio" />
<label for="risksYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="risksRed" type="radio" />
<label for="risksRed" style="background-color: red;"><b>R </b></label>
</div>
<div class="entry">
Customer Satisfaction:
<input id="satisfactionGreen" type="radio" />
<label for="satisfactionGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="satisfactionYellow" type="radio" />
<label for="satisfactionYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="satisfactionRed" type="radio" />
<label for="satisfactionRed" style="background-color: red;"><b>R </b></label>
</div>
</div>
<div id="Tier2">
<div class="entry">
Budget:
<input id="budgetGreen" type="radio" />
<label for="budgetGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="budgetYellow" type="radio" />
<label for="budgetYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="budgetRed" type="radio" />
<label for="budgetRed" style="background-color: red;"><b>R </b></label>
</div>
<div class="entry">
Deliverables:
<input id="deliverablesGreen" type="radio" />
<label for="deliverablesGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="deliverablesYellow" type="radio" />
<label for="deliverablesYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="deliverablesRed" type="radio" />
<label for="deliverablesRed" style="background-color: red;"><b>R </b></label>
</div>
</div>
<div id="Tier1">
<div class="entry">
Scope/Contract:
<input id="scopeGreen" type="radio" />
<label for="scopeGreen" style="background-color: #03ce07;"><b>G </b></label>
<input id="scopeYellow" type="radio" />
<label for="scopeYellow" style="background-color: #fff31a;"><b>Y </b></label>
<input id="scopeRed" type="radio" />
<label for="scopeRed" style="background-color: red;"><b>R </b></label>
</div>
</div>
</div>
http://jsfiddle.net/27K5V/6/
I want to create a box like this with title:
Can any one please let me know if there is a default CSS tag to do this? Or do I need to create my custom style?
I believe you are looking for the fieldset HTML tag, which you can then style with CSS. E.g.,
<fieldset style="border: 1px black solid">
<legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>
Text within the box <br />
Etc
</fieldset>
If you are not using it in forms, and instead want to use it in an non-editable form, you can do this via the following code -
.title_box {
border: #3c5a86 1px dotted;
}
.title_box #title {
position: relative;
top: -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
}
.title_box #content {}
<div class="title_box" id="bill_to">
<div id="title">Bill To</div>
<div id="content">
Stuff goes here.<br> For example, a bill-to address
</div>
</div>
from http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
fieldset {
border: 1px solid green
}
legend {
padding: 0.2em 0.5em;
border: 1px solid green;
color: green;
font-size: 90%;
text-align: right;
}
<form>
<fieldset>
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">E-mail:</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
</fieldset>
</form>
This will give you what you want
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
As far as I know (correct me if I'm wrong!), there isn't.
I'd recommend you to use a div with a negative-margin-h1 inside. Depending on the semantic structure of your document, you could also use a fieldset (HTML) with one legend (HTML) inside which approximately looks like this by default.
I think this example can also be useful to someone:
.fldset-class {
border: 1px solid #0099dd;
margin: 3pt;
border-top: 15px solid #0099dd
}
.legend-class {
color: #0099dd;
}
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
You can try this out.
<fieldset class="fldset-class">
<legend class="legend-class">Your Personal Information</legend>
<table>
<tr>
<td><label>Name</label></td>
<td><input type='text' name='name'></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><input type='text' name='Address'></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type='text' name='City'></td>
</tr>
</table>
</fieldset>
DEMO