Can anyone help me? I tried to add a border-color using :focus on the form input when the user clicks on the text field. But it doesn't work. Any help is really appreciated. Thank you!
form.customNewsletter-form {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-start;
margin: 0;
padding: 0;
gap: 16px;
}
form.customNewsletter-form input[type="text"] {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 300;
color: #ffffff;
background-color: #0d0d0d;
border: 1px solid #404040;
width: 70%;
height: 48px;
padding: 0 16px;
letter-spacing: 0.8px;
border-radius: 4px;
margin: 0;
}
form.customNewsletter-form input[type="text"]:focus {
border: 1px solid #cd0d0d;
}
form.customNewsletter-form input::placeholder {
color: #8d8d8d;
}
form.customNewsletter-form input[type="submit"] {
color: #ffffff;
font-family: "Roboto Condensed", sans-serif;
font-size: 16px;
font-weight: 300;
background-color: #cd0d0d;
border: none;
border-radius: 4px;
height: 48px !important;
width: 30%;
letter-spacing: 0.8px;
text-transform: uppercase;
margin: 0 auto !important;
transition: 0.3s all ease;
}
form.customNewsletter-form input[type="submit"]:hover {
background-color: #8e0000;
color: #ffffff;
-webkit-transform: scale(0.99);
transform: scale(0.99) 0.5s ease-in;
}
<form class="customNewsletter-form" action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<!-- Email field (required) -->
<input type="text" name="email" placeholder="Enter your email">
<!-- List token -->
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="sample">
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.website.com/thankyou">
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0">
<!-- Subscriber button -->
<input type="submit" value="Subscribe">
</form>
Please see here for the demo.
I'm expecting the border-color of the input field to change to red when the user clicks on it.
Add outline:none;
form.customNewsletter-form input[type="text"]:focus {
outline: none;
border: 1px solid #cd0d0d;
}
Related
I have the following code in my contact form CSS file. How do I make the whole form responsive? I hope that this is possible considering that getting another form designed will be frustrating for me. Your help is much appreciated:
CSS
#fcf-form {
display:block;
}
.fcf-body {
margin: 0;
font-family: -apple-system, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
padding: 30px;
padding-bottom: 10px;
max-width: 85%;
width: 800px;
margin-left : 12.5em;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-credit {
padding-top: 10px;
font-size: 0.9rem;
color: #545b62;
}
.fcf-credit a {
color: #545b62;
text-decoration: underline;
}
.fcf-credit a:hover {
color: #0056b3;
text-decoration: underline;
}
.fcf-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.fcf-btn {
transition: none;
}
}
.fcf-btn:hover {
color: #212529;
text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.fcf-btn-primary {
color: #fff;
background-color: #ee2348;
border-color: #ee2348;
}
.fcf-btn-primary:hover {
color: #fff;
background-color: #ee2348;
border-color: #ee2348;
}
.fcf-btn-primary:focus, .fcf-btn-primary.focus {
color: #fff;
background-color: #ee2348;
border-color: #ee2348;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.fcf-btn-block {
display: block;
width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}
HTML
<link href="contact-form.css" rel="stylesheet" />
<div class="fcf-body">
<p></p>
<div id="fcf-form">
<h3 class="fcf-h3">Contact us</h3>
<form action="contact-form-process.php" class="fcf-form-class" id="fcf-form-id" method="post">
<div class="fcf-form-group"><label class="fcf-label" for="Name">Your name</label>
<div class="fcf-input-group"><input class="fcf-form-control" id="Name" name="Name" required="" type="text" /></div>
</div>
<div class="fcf-form-group"><label class="fcf-label" for="Email">Your email address</label>
<div class="fcf-input-group"><input class="fcf-form-control" id="Email" name="Email" required="" type="email" /></div>
</div>
<div class="fcf-form-group"><label class="fcf-label" for="Message">Your message</label>
<div class="fcf-input-group"><textarea class="fcf-form-control" id="Message" maxlength="3000" name="Message" required="" rows="6"></textarea></div>
</div>
<div class="fcf-form-group"><button class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block" id="fcf-button" type="submit">Send Message</button></div>
</form>
</div>
</div>
Please don't mind my putting the whole code here. As I am a newbie, I didn't know where that new line would go in the whole thing. Thanks for understanding.
PS: There is only this form on my page.
I want to move the "Not got account" submit button to below the form but not sure what I am doing wrong
I think it is the CSS for .box but not sure how to edit it so it moves the button below and I tried using div tags to move it and they did not work.
Is there a bit of code in my CSS that is keeping it in the centre
I would like to keep it in the same style
Any help would be greatly appreiated
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
This is because the 2nd form uses the same class box which centers the element with the first one.
.box {
...
top: 50%; <--- this is the problem
left: 50%;
...
}
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box2 {
padding: 0px;
top: 90%;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box box2" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Just don't position your boxes absolute. Makes it quite difficult to get the positioning right.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Not sure if this is what you are looking for, but position absolute in your form is not the best use in this case. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Anyway, I made some adjustments in your code: I added a div container for the whole page and made some changes in your css as well. You can check it out in the demo below.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
text-align: center;
font-weight: 100;
width: 100vw;
height: 100vh;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
margin-top: 10%;
width: 400px;
padding: 40px;
/* position: absolute; */
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email" />
<input type="password" name="u_pass" placeholder="Password" />
<input type="submit" name="u_btn" value="Login" />
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?" />
</form>
</div>
</div>
</body>
</html>
I'm creating a webpage with no js , and the llok I have is perfect except for one the grey input/submit boxes , I've tried all sorts of options with buttons code but cant turn them black or blue or even transparent , is it possible ? if yes how ? someone please help
.input {
background-color: transparent;
background: #7ec2cf;
color: #eaed5e;
font-size: 15px;
line-height: 15px;
padding: 3px;
border-radius: 2px;
font-family: Georgia, serif;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
border-color: #7ec2cf;
border-style: #7ec2cf 2px;
display: inline-block;
}
.input:hover {
background: #eaed5e;
color: #7ec2cf
}
.input:active {
background: #7ec2cf;
color: #eaed5e
}
<div class="input">
<input value="Logout" type="submit">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
html:
<form method="post">
<div>
<input value="Logout" type="button" class="press">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
</form>
css:
.press {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.input:hover { background: #eaed5e; color: #7ec2cf} .input:active { background: #7ec2cf; color: #eaed5e }
Is this what you wanted?
The problem with your css is the selector you're using - .input which represents class names input, for the selecting the button either use -
.input input{
//your code here for the button
}
or
.input>input{
//your code here for the button
}
or just
input {
//your code here for the button
}
Take a look at the following example. Just remove the div and apply the .input class to the input element. Also note that background-color redundant in this case.
.input {
background: #7ec2cf;
color: #eaed5e;
font-size: 15px;
line-height: 15px;
padding: 3px;
border-radius: 2px;
font-family: Georgia, serif;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
border-color: #7ec2cf;
border-style: #7ec2cf 2px;
display: inline-block;
}
.input:hover {
background: #eaed5e;
color: #7ec2cf
}
.input:active {
background: #7ec2cf;
color: #eaed5e
}
<input value="Logout" type="submit" class="input">
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
I am trying to style - newsletter - input - submit so that when you see the web in your phone the three elements show up one under the other- and all the boxes in the same size and align.
Does anyone have an easy solution for this? Ill appreciate your help very much. Regards and thanks! http://vtwg.eu/michael/index.html
V
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>
input {
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
float: center;
font-size: 1em;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
}
If you want to change design elements for mobie view, you should use media query. In the snippet media query set to max-width of viewport equal 480px. You can change this value as you wish. When you narrow browser window
down to less than 480px, you'll see the diference.
input {
display: inline-block;
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
font-size: 1em;
display: inline-block;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
#media screen and (max-width: 480px) {
input, .submit-button, label {
display: block;
width: 120px;
margin: 5px;
box-sizing: border-box;
}
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>
Write styles in media query with respect to the resolution.
HTML:
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>
CSS:
input {
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
float: center;
font-size: 1em;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
}
#media only screen and (max-width: 767px) {
label,
#Name,
.submit-button
{
width: 100%;
display: block;
margin: 5px 0;
box-sizing: border-box;
}
}
I really like the Option Button found in the ZURB building block library here: http://zurb.com/building-blocks/option-button
However, I am almost always working with 1 x normal hyperlink button and a submit button. I'm finding this is causing me headaches wherever I try to have neat rows of buttons that should look the same. What additional CSS would get this 'Option Button' to work as desired when working with an input submit class ?
My HTML is pretty straightforward and looks like this:
<form name="article_selection" action="single-article-view.php" method="post">
<div class="row">
<div class="medium-6 columns">
<div class="wrapper">
<label>READ MORE</label>
Read on another website
<input type="hidden" value="<?php echo $article_ID; ?>" name="article_ID" />
<input type="submit" class="inside" name="<?php echo $article_ID; ?>" value="Read on this website" />
</div>
</div>
</div>
</form>
In this scenario the 2nd half of the option button is malformed.
I can't update an image to display due to reputation restrictions (seriously?)
<img src="http://i96.photobucket.com/albums/l185/indoanalytics/Button_Problem_zpszhgpvzbt.png" border="0" alt=" photo Button_Problem_zpszhgpvzbt.png"/>
The CSS as per the building blocks option button (linked to above) is:
.wrapper {
overflow: hidden;
display: inline-block;
border: 2px solid #008cba;
border-radius: 999px;
text-align: center;
width: 100%;
background: #fff;
margin-top: 50px;
}
.wrapper:hover {
border: none;
background-color: #008cba;
transition: background-color 0.3s ease;
}
.wrapper:hover .inside {
display: block;
font-size: 16px;
padding: 22px;
float: left;
}
.wrapper:hover .inside:hover {
transition: background-color 0.3s ease;
background-color: rgba(0, 0, 0, 0.1);
}
.wrapper:hover label {
display: none;
}
.wrapper .inside {
display: none;
color: #fff;
width: 50%;
z-index: 9999;
}
.wrapper label {
padding: 16px;
color: #008cba;
font-size: 16px;
font-weight: bold;
}
Update: I also have separate button stylings before the above in the my CSS which may be causing the problem.
.topic-button {
border-style: solid;
border-width: 1px;
font-family: inherit;
font-weight: bold;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #009fd9;
color: #fff;
box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset;
border-color: #008cbf;
font-size: 12px;
padding: 5px 6px;
margin-top: 2px;
cursor: pointer;
}
.menu-topic-button {
width:99%;
background: #444444;
border:none;
font-family: inherit;
font-weight: bold;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
color: white;
font-size: 14px;
padding: 2px;
margin-top: 2px;
cursor: pointer;
}
I have attempted applying CSS from the above to:
.wrapper button[type="submit"] {}
.wrapper input[type="submit"] {}
For both I have copied the .inline CSS from the zurb building blocks as well as tried resetting CSS values back to zero in both, but no luck.
Any help greatly appreciated.