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>
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>
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>
<html>
<body>
<div align="center">
<form method="link" action="file:///C:/Users/David/Desktop/about%20samoyeds">
<input type="submit" value="About Samoyeds" style="width:120px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
<form method="link" action="http://www.hillspet.com/en/us/dog-breeds/samoyed">
<input type="submit" value="History of Samoyeds" style="width:150px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
<form method="link" action="file:///C:/Users/David/Desktop/dealers%20of%20samoyeds">
<input type="submit" value="Samoyed Dealers" style="width:130px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
</div>
</body>
</html>
pic of what code comes out as
this is the code I have a lot more I used but that has nothing to do with this so it's not in there I have a problem with that code
Make the form elements display: inline-block;
BTW, the align attribute is deprecated. Use CSS to align/center things instead.
.wrap {
text-align: center;
}
form {
display: inline-block;
}
<div class="wrap">
<form method="link" action="file:///C:/Users/David/Desktop/about%20samoyeds">
<input type="submit" value="About Samoyeds" style="width:120px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
<form method="link" action="http://www.hillspet.com/en/us/dog-breeds/samoyed">
<input type="submit" value="History of Samoyeds" style="width:150px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
<form method="link" action="file:///C:/Users/David/Desktop/dealers%20of%20samoyeds">
<input type="submit" value="Samoyed Dealers" style="width:130px; height:40px; background-color: darkwhite; border-color: black; ">
</form>
</div>
I have made a simple form, but I cannot get the submit button to take in its own styles.
Please tell me why I cannot style the submit button individually, and preferably, how I can target this button only.
label{float:left;text-align:right;}
input{width:44%;}
textarea{width:99%;float:none;height:300px;}
input{float:left;padding:20px;margin-bottom:20px;}
textarea, input{border-radius:5px;border:thin groove #000;}
textarea:focus, input:focus {
outline:none;
border: 1px solid #f00;
/* create a BIG glow */
box-shadow: 0px 0px 14px #f00;
-moz-box-shadow: 0px 0px 14px #f00;
-webkit-box-shadow: 0px 0px 14px #f00;
border-radius:5px;
}
#thesubmit{padding:23px;background:#939;font-size:30px;border-radius:20px;}
<form id="contact_form">
<div>
<label for="name"></label>
<input type="text" name="Name" value="Enter Name" style="margin-right:20px;"/>
</div>
<div>
<label for="email"></label>
<input type="text" name="Email" value="Enter Email"/>
</div>
<div>
<label for="message"></label>
<textarea name="message" placeholder="Enter Message" id="message" rows="10" cols="50"></textarea>
</div>
<div class="button">
<input type="submit" value="send now" id="thesubmit" />
You can do this:
.button input[type=submit]{
background: #000;
color: #fff;
}
DEMO HERE
Use id targeted css -
#thesubmit {
/*css for the item with this id only, in this case the button */
}
Put your CSS into "style" tags and it will work! Copied your code and the submit button has it's own background color!
I am mailing html body with two buttons APPROVE/REJECT. Now when I click Approve through EMAIL body, the HTML form posts hidden fields to the aspx page where I am fetching the values through Request.Form[]. Here on aspx page when I try to catch the values, its shows keys are empty. It doesn't retrieve any value from POST. Please help!
HTML CODE (This is mailed to recipient):
<table>
<tr>
<td>
<form id="Approve" action="http://localhost:58177/LMS/WEBFORMS/frmGetApprovalStatus.aspx"
method="post">
<input type="submit" value="Approve" style="font: bold 15px Arial; text-decoration: none;
background-color: #228B22; color: #FFFFFF; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC;" />
<input type="hidden" name="Approval_flag" value="xyz" />
<input type="hidden" name="Leadno" value="17" />
<input type="hidden" name="username" value="1" />
<input type="hidden" name="mstrid" value="abc" />
<input type="hidden" name="request_remarks" value="def" />
<input type="hidden" name="UNIQUE_ID" value="pqr" />
</form>
</td>
<td>
<form id="Reject" action="http://localhost:58177/LMS/WEBFORMS/frmGetApprovalStatus.aspx"
method="post">
<input type="submit" value="Reject" style="font: bold 15px Arial; text-decoration: none;
background-color: #FF0000; color: #FFFFFF; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC;" />
<input type="hidden" name="Approval_flag" value="xyz" />
<input type="hidden" name="Leadno" value="17" />
<input type="hidden" name="username" value="1" />
<input type="hidden" name="mstrid" value="abc" />
<input type="hidden" name="request_remarks" value="def" />
<input type="hidden" name="UNIQUE_ID" value="pqr" />
</form>
</td>
</tr>
</table>
ON ASPX PAGE :
if (!string.IsNullOrEmpty(Request.Form["Leadno"]) )
{
Response.Write("<u>Values using Form Post</u><br /><br />");
Response.Write("<b>Leadno:</b> " + Request.Form["Leadno"]);
}
Thanks in advance!!!