I am trying to do one of the most basic things in CSS. A hover state for one of my buttons, but for some reason, it's not doing anything! What is going on with it?
Task info
<label>Your Note:</label><br/>
<input type="text" id="noteTitle" placeholder="Note Title..."><br/>
<textarea id="note" placeholder="Add Content..."></textarea> <br/>
<button onclick="createNote()" class="btnStyle">Create Task</button>
<br/> <br/>
<label>Note Id:</label><br/>
<input type="text" id="noteId" placeholder="Type Note Id..."> <br/>
<div class="align"><button onclick="deleteNote()" class="btnStyle">Delete Task</button></div>
<div id="noteTitlesId"></div>
<div class="align"><button onclick="getNoteTitles()" class="btnStyle">Get Task Titles</button></div>
<div class="align"> <button onclick="updateNote()" class="btnStyle">Update note</button></div>
</div>
My CSS for it:
.btnStyle {
border: 0.5px solid gray;
border-radius: 5px;
background-color: transparent;
}
.btnStyle :hover {
background-color: #eb9356;
color: #ffff;
}
Don't Give space between .btnStyle :hover remove that one space and code for that is below:
.btnStyle:hover {
}
Related
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>
Every time I submit the form, even when the input text fields are empty, the form gets submitted even though I put the required tag. Is there a problem with my code? I don't know how to fix this or where the error lies. Also, how can I clear the input fields after I submit. Thank you in advance. Is it a problem from the compiler (I'm using VS code and I'm launching the website on google chrome)
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-sm-5 form-group">
<label for="firstName">First Name</label>
<input
type="text"
id="firstName"
class="form-control"
#fnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="lastName">Last Name</label>
<input
type="text"
id="lastName"
class="form-control"
#lnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="phone">Phone Number</label>
<input
type="text"
id="lname"
class="form-control"
#phoneinput
required />
</div>
<div class="col-sm-2">
<button
class="btn btn-success"
type="submit"
(click)="onAddContactItem()"
>Add New Contact</button>
</div>
</div>
</form>
</div>
</div>
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 3px solid #CCC;
border-radius: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: center;
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
font-size: 16px;
display:block;
border: 0;
height: 34px;
margin: 0;
float:left;
}
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
novalidate is default in later version of angular. So HTML5 validators are not triggered. Use ngNativeValidate in your form as an attribute ( )
I have this few line of html code i want to arrange the label and input side by side with the label on top of the input with css but am not able to work around it. I found similar question herewhich suggest use of display:inline-block; to achieve that but after including it in my code an not able to do it.
body {
background-color: red;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="" , method="">
<div id="styleform">
<label for="NAME">   FIRST NAME</label></br>
<input type="text" id="NAME" size="20"></br>
</br>
<label for="no">   NUMBER</label></br>
<input type="number" id="no" , size="45"></br>
</br>
<label for="age">   AGE</label></br>
<input type="number" id="age" size="45"></br>
</br>
<label for="S_NO:">   CODE</label></br>
<input type="text" id="S_NO:" size="20"></br>
</br>
</div>
</form>
</div>
I think this kind of easy question for some of you this new be in web development
This how i want it to look like
UPDATE
Updated fiddle after image provided
#LAS You are inserting line breaks, that is part of the problem. I have created this fiddle, fixing several things: https://jsfiddle.net/Lu5k1yk8/6/
Added ; after your spaces
fixed the line breaks (I believe the syntax should be <br> or <br />, not </ br> and removed them after labels
Changed your CSS for the textboxes to inline-table
Increased width of labels so they do not create new lines
Also, I would suggest not using spaces (nbsp;) or <br />'s and instead using CSS to create the correct spaces and line breaks.
Here is a good demonstration of how to use padding and margins: http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html
Just remove br tag and add this to your code
input[type="text"] + label {
display: inline;
}
I think the best way is to take the label and input in a table.enter code here<table>
<tr><th>label</th><td><input type="text"></td></tr></table>
I changed your code a bit, I hope this is what you are looking for:
I set label into an inline-block element and set its min-width to 150px, and removed the margin-left: 150px;.
Also, if you use  , you need to add a semicolon at the end of it: , and with the </br> you need to add the slash at the end: <br />
body{
background-color: red;
}
label {
display: block;
min-width: 150px;
}
.test {
display: inline-block;
width: 45%;
background-color: white;
border: solid 1px blue;
padding: 5px 10px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="", method="">
<div id="styleform">
<div class="test">
<label for="NAME" >FIRST NAME</label>
<input type="text" id="NAME" size="20"><br /><br />
</div>
<div class="test">
<label for="no" >NUMBER</label>
<input type="number" id="no", size="45"><br /><br />
</div>
<div class="test">
<label for="age" >AGE</label>
<input type="number" id="age" size="45"><br /><br />
</div>
<div class="test">
<label for="S_NO:" >CODE</label>
<input type="text" id="S_NO:" size="20"><br /><br />
</div>
</div>
</form>
</div>
**EDIT: ** I have changed the code. Hope this helps you this time ;)
Hope this helps.
Do you mean something like this?
.block {
display: block;
}
.inline-block {
display: inline-block;
width: 49%;
}
body {
padding: 10px;
}
<div id=tk>
<form action="" method="">
<div id="styleform">
<div class="inline-block">
<label class="block" for="NAME">FIRST NAME</label>
<input class="block" type="text" id="NAME" size="20">
</div>
<div class="inline-block">
<label class="block" for="no">NUMBER</label>
<input class="block" type="number" id="no" , size="45">
</div>
<div class="inline-block">
<label for="age" class="block" >AGE</label>
<input type="number" class="block" id="age" size="45">
</div>
<div class="inline-block">
<label class="block" for="S_NO:">CODE</label>
<input type="text" class="block" id="S_NO:" size="20">
</div>
</div>
</form>
</div>
I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.