The form send button changes from blue styled in my css to html deafult send form button. I want my blue style in any window size. Here is my code:
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
cursor: pointer;
}
.form-inline button:hover {
background-color: royalblue;
}
<form class="form-inline" action="/action_page.php">
<input type="name" id="name" placeholder="Namn" name="name">
<input type="email" id="email" placeholder="Email" name="email">
<input type="tel" id="tel" placeholder="Tel" name="tel">
<input type="srv" id="ser" placeholder="Välj tjänst" name="ser">
<input type="date" id="date" placeholder="Datum" name="date">
<label>
<input type="checkbox" name="remember">Remember me
</label>
<button type="submit">SEND</button>
</form>
Related
I want to make Gmail Style Input Tags background change for email address input validation with CSS, as the tag's background colour turns red for invalid input & turns green for a valid input (like example#gmail.com).
I have tried
<input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="">
```css
<style>
.bootstrap-tagsinput .tag input:valid {
background-color:green
}
.bootstrap-tagsinput .tag input:invalid{
background-color:red
}
</style>
Your code seems to work, only you were missing trailing semicolons on your CSS property declarations, e.g.
background-color: green;
Here is a working example:
.bootstrap-tagsinput .tag input:valid {
background-color: green;
}
.bootstrap-tagsinput .tag input:invalid {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="bootstrap-tagsinput">
<label class="tag">
<input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="" value="invalid-email">
</label>
<label class="tag">
<input class="form-control form-control-sm mailfield" type="email" data-role="tagsinput" data-class="label-info" placeholder="Sender Mail Id" autocomplete="on" autofocus="" required="" value="valid#ema.il">
</label>
</div>
I have a wordpress site and I am customising it with the Divi theme. I have added an HTML form to a 'Code' module and it works great. However I cannot work out where I should put the CSS. I have tried to 'Custom CSS' areas of both the row and module itself. Perhaps there is something wrong in the code? I have pasted it below. Thanks!
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
<font face="helvetica"
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" target='_parent'>
<input type=hidden name="oid" value="00D0Y0000034cvq">
<input type=hidden name="retURL" value="https://globalstudyuk.com/success-qatar">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="kasper.martlev#weare4c.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>
<label for="last_name">Last Name</label> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>
Date of Birth: <span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" name="inputBox" placeholder=" DD/MM/YYYY" /></span><br><br>
<label for="mobile">Mobile</label> <input id="mobile" maxlength="40" name="mobile" size="20" type="number" pattern="\d*" required=true/><br><br>
<label for="email">Email</label> <input id="email" pattern="[^ #]*#[^ #]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>
Current/Previous School/University: <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text" required=true /><br><br>
Course you would like to study: <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text" required=true /><br><br>
<label for="lead_source">Where did you hear about us?</label> <select id="lead_source" name="lead_source"><option value="">--None--</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Google">Google</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Deferred">Deferred</option>
<option value="Flier / Poster">Flier or Poster</option>
<option value="GSUK Alumni">GSUK Alumni</option>
<option value="GSUK_Website">GSUK_Website</option>
<option value="Other_(Please specify)">Other</option>
<option value="Referral_(Please specify)">Referral</option>
<option value="School Counsellor_(Please specify)">School Counsellor</option>
<option value="School Presentation">School Presentation</option>
<option value="School Tour">School Tour</option>
<option value="University Website_(Please specify)">University Website</option>
<option value="Web">Web</option>
</select><br><br>
<input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" type="checkbox" value="1" />
<input type=hidden id="country_code" name="country_code"value="QA" />
<input type=hidden id="city" name="city" value="Doha" />
<center><input type="submit" name="submit"></center>
</form>
login to your dashboard -> click on Appearance -> click Customize -> click on Additional CSS and paste your css in that.
We resolved the issue by removing
div {
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
}
Although this would work fine on most pages, it was causing white boxes to appear in strange places, presumably due to the CMS we were using building pages in columns.
This question already has answers here:
Why cannot change checkbox color whatever I do? [duplicate]
(16 answers)
Closed 4 years ago.
input:checked {
height: 20px;
width: 20px;
background-color: red;
}
input:not(:checked) + label {
opacity: 0.7;
}
<html>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
<input type="radio" value="female" name="gender"> <label>Female</label><br>
<input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
<input type="checkbox" value="Car"> <label>I have a car </label>
</form>
Here i have set of radio and checkbox inputs and i am trying to change the background color of the checked input. I'm able to alter the height and width of the element but not the background-color of the inputs.
Where am doing wrong?
Here is how to do it:
input:checked {
height: 15px;
width: 15px;
border-radius:50%;
background-color: red;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:checked + label {
background-color: red;
}
input:not(:checked) + label {
opacity: 0.7;
}
<html>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender"> <label>Male</label><br>
<input type="radio" value="female" name="gender"> <label>Female</label><br>
<input type="checkbox" checked="checked" value="Bike"> <label>I have a bike</label><br>
<input type="checkbox" value="Car"> <label>I have a car </label>
</form>
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
It defaults to the first one even after selecting other two.
My Code:-
input[type=radio] {
display:none;
}
input[type=radio] + label:before {
content: "";
display: inline-block;
width: 35px;
height: 35px;
vertical-align:middle;
margin-right: 8px;
background-color: #DFF0EF;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
border-radius: 4px;
}
input[type=radio]:checked + label:before {
content:"\2714";
color:white;
background-color: #34E098;
font-size:1.5em;
text-align:center;
line-height:34px;
text-shadow:0px 0px 3px #eee;
}
My Buttons:-
https://codepen.io/coderguyinthehouse/pen/VjbdLd
Your IDs need to be unique and so the associated labels' for value.
EG
<input type="radio" id="sizeselected1" name="downloadsize" value="KB">
<label for="sizeselected1">1</label>
input[type=radio] {
display:none;
}
input[type=radio] + label:before {
content: "";
display: inline-block;
width: 35px;
height: 35px;
vertical-align:middle;
margin-right: 8px;
background-color: #DFF0EF;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
border-radius: 4px;
}
input[type=radio]:checked + label:before {
content:"\2714";
color:white;
background-color: #34E098;
font-size:1.5em;
text-align:center;
line-height:34px;
text-shadow:0px 0px 3px #eee;
}
<form class="sizeselect" id="sizeselect" name="sizeselect">
<input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
<input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
<input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>
<form class="speedselect" id="speedselect" name="speedselect">
<input type="radio" id="speedselected1" name="downloadspeed" value="Kbps"><label for="speedselected1">11</label>
<input type="radio" id="speedselected2" name="downloadspeed" value="Mbps"> <label for="speedselected2">12</label>
<input type="radio" id="speedselected3" name="downloadspeed" value="Gbps"> <label for="speedselected3">13</label>
</form>
You can't use same ID's
<form class="sizeselect" id="sizeselect" name="sizeselect">
<input type="radio" id="sizeselected1" name="downloadsize" value="KB"
<label for="sizeselected1">1</label>
<input type="radio" id="sizeselected2" name="downloadsize" value="MB"
<label for="sizeselected2">2</label>
<input type="radio" id="sizeselected3" name="downloadsize" value="GB"
<label for="sizeselected3">3</label>
</form>
Similarly for other form...change the ids.
You need to use unique id on your input
<form class="sizeselect" name="sizeselect">
<input type="radio" id="sizeselected1" name="downloadsize" value="KB"><label for="sizeselected1">1</label>
<input type="radio" id="sizeselected2" name="downloadsize" value="MB"><label for="sizeselected2">2</label>
<input type="radio" id="sizeselected3" name="downloadsize" value="GB"><label for="sizeselected3">3</label>
</form>
<form class="speedselect" name="speedselect">
<input type="radio" id="speedselected11" name="downloadspeed" value="Kbps"><label for="speedselected11">11</label>
<input type="radio" id="speedselected12" name="downloadspeed" value="Mbps"> <label for="speedselected12">12</label>
<input type="radio" id="speedselected13" name="downloadspeed" value="Gbps"> <label for="speedselected13">13</label>
</form>
Since you're using custom checkboxes, the checked state is triggered when you click the label - but all of the labels are for the same input (sizeselected). Just change the IDs for each input and it'll work as you expect it to!
<form class="sizeselect" id="sizeselect" name="sizeselect">
<input type="radio" id="sizeselected" name="downloadsize" value="KB">
<label for="sizeselected">1</label>
<input type="radio" id="sizeselected2" name="downloadsize" value="MB">
<label for="sizeselected2">2</label>
<input type="radio" id="sizeselected3" name="downloadsize" value="GB">
<label for="sizeselected3">3</label>
</form>
https://codepen.io/will0220/pen/KrmZqr