I'm trying to replace that old input file with something modern that i designed in the fiddle. However since i'm using WP contact form 7 is integrated into theme and the only way i can edit it is via this code -
<label>
[text* your-name placeholder "Your Name (required)"] </label>
<label>
[email* your-email placeholder "Your email (required)"] </label>
<label>
[text your-subject placeholder "Subject"] </label>
<label>
[textarea your-message placeholder "Your Message"] </label>
[file file-442 limit:10485760 filetypes:doc|pdf|csv class:cv]
[submit "AHOI!"]
So is there a way to replace this last input where the file is with my input and hide original input? This is my input
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid currentColor;
color: #083a50;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: 1;
padding: 0.5em 2em 0.25em 1em;
user-select: none;
}
.upload {
height: 1.75em;
margin-right: 0.5em;
padding-bottom: 0.25em;
width: auto;
vertical-align: middle;
}
<label for="file-upload" class="custom-file-upload">
<img class="upload"src="http://www.plaforma.me/wp-content/uploads/2018/04/SEND-FILE-IKONICA.png" width="300" height="53" alt=""> Select File
</label>
<input id="file-upload" type="file" />
Don't know why here doesn't load icon next to text but there is icon, so anyone got idea how could i replace original in contact form 7?
For styling, file input type the http://markusslima.github.io/jquery-filestyle library is very good.
$(":file").jfilestyle({input: false, text: "Select File"});
Also, see the options here. http://markusslima.github.io/jquery-filestyle/options.html
Related
I'm 15 days into learning to code. I did the HTML modules on Freecodecamp, and I've started a mini project on CodePen. I've found I've already forgotten a ton, but I want to crack on with the project as that's what's helping me learn stuff.
My mini-project is a sign up form. Currently only email, but later I want to add first/last name plus other data points. However I want to know how to style the box of the email so it can be a bit bigger, plus I want to be able to make the text next to my checkbox smaller. But I've gotten stuck on both parts. I used a basic template for the form and adjusted it from there, but I'm really stuck on the styling.
My code is below. Am I along the right lines?
HTML
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div></br>
<label for="email">
<input type="text" placeholder="Enter Email" name="email" required>
</br></br>
</label>
<label>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
</label>
<label>
<input type="checkbox"> I agree to the terms and conditions here</input>
</label>
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 18px;
}
p {
font-size: 14px;
}
.myForm{
font-family: Verdana,Arial,sans-serif;
width: 200px;
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
label[for=email] {
font-size: 20px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
.myForm {
width: 200px;
}
.enter-email {
width: 300px;
/* what ever width you want */
height: 20px;
/* change the height if you want like this */
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
.terms-conditions {
font-size: 16px;
/* change the size of the font */
}
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div>
</br>
<label for="email"> Enter E-mail:</label>
<input class="enter-email" type="text" placeholder="Enter Email" name="email" required>
</br>
</br>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
<input type="checkbox">
<span class="terms-conditions"> I agree to the terms and conditions
here
</span>
</input>
This will help you. To change the input box for the text use a class on it and change its properties(search for more other than the two I showed) or you could have done input[type=text] to select that text input but classes are better if you have more text inputs and want them styled differently.
As for the changing text of terms and conditons, you could have wrapped it in paragraph tags, heading tags and also as I used span tags. Then again give them a class and change the font-size.
Also as pointed out in the comment you don't need to specify the font-family everytime unless you want a different font applied there. Everything text property applied in body will be given to all the text in the body unless you specify something for that text otherwise.
Wondering if its possible to change the size of checkbox as it's possible with buttons. I want it to be bigger, so it makes it easy to press. Right now its looking like this:
Code:
<div class="form-group">
<label class="col-md-7 control-label">Kalsiumklorid: </label>
<div class="col-md-5" >
{{ Form::checkbox('O_Kals_Klor', 1 , array('class' => 'form-control' )) }}
</div>
</div>
Or you can style it with pixels.
.big-checkbox {width: 30px; height: 30px;}
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
It is possible in css, but not for all the browsers.
The effect on all browsers:
http://www.456bereastreet.com/lab/form_controls/checkboxes/
A possibility is a custom checkbox with javascript:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Following works in bootstrap 4 and displays well in CSS, mobile and has no issues with label spacing.
CSS
.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
top: .8rem;
width: 1.55rem;
height: 1.55rem;
}
.checkbox-lg .custom-control-label {
padding-top: 13px;
padding-left: 6px;
}
.checkbox-xl .custom-control-label::before,
.checkbox-xl .custom-control-label::after {
top: 1.2rem;
width: 1.85rem;
height: 1.85rem;
}
.checkbox-xl .custom-control-label {
padding-top: 23px;
padding-left: 10px;
}
HTML
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="checkbox-3">
<label class="custom-control-label" for="checkbox-3">Large checkbox</label>
</div>
You can also make it extra large by declaring checkbox-xl
If anyone from BS team is reading this, it would be really good if you make this available right out of the box, I don't see anything for it in BS 5 either
source
It is possible to implement custom bootstrap checkbox for the most popular browsers nowadays.
You can check my Bootstrap-Checkbox project in GitHub, which contains simple .less file.
There is a good article in MDN describing some techniques, where the two major are:
Label redirects a click event.
Label can redirect a click event to its target if it has the for attribute like in <label for="target_id">Text</label> <input id="target_id" type="checkbox" />, or if it contains input as in Bootstrap case: <label><input type="checkbox" />Text</label>.
It means that it is possible to place a label in one corner of the browser, click on it, and then the label will redirect click event to the checkbox located in other corner producing check/uncheck action for the checkbox.
We can hide original checkbox visually, but make it is still working and taking click event from the label. In the label itself we can emulate checkbox with a tag or pseudo-element :before :after.
General non supported tag for old browsers
Some old browsers does not support several CSS features like selecting siblings p+p or specific search input[type=checkbox]. According to the MDN article browsers that support these features also support :root CSS selector, while others not. The :root selector just selects the root element of a document, which is html in a HTML page. Thus it is possible to use :root for a fallback to old browsers and original checkboxes.
Final code snippet:
:root {
/* larger checkbox */
}
:root label.checkbox-bootstrap input[type=checkbox] {
/* hide original check box */
opacity: 0;
position: absolute;
/* find the nearest span with checkbox-placeholder class and draw custom checkbox */
/* draw checkmark before the span placeholder when original hidden input is checked */
/* disabled checkbox style */
/* disabled and checked checkbox style */
/* when the checkbox is focused with tab key show dots arround */
}
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {
width: 14px;
height: 14px;
border: 1px solid;
border-radius: 3px;
/*checkbox border color*/
border-color: #737373;
display: inline-block;
cursor: pointer;
margin: 0 7px 0 -20px;
vertical-align: middle;
text-align: center;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {
background: #0ccce4;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {
display: inline-block;
position: relative;
vertical-align: text-top;
width: 5px;
height: 9px;
/*checkmark arrow color*/
border: solid white;
border-width: 0 2px 2px 0;
/*can be done with post css autoprefixer*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {
background: #ececec;
border-color: #c3c2c2;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {
background: #d6d6d6;
border-color: #bdbdbd;
}
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {
outline: 1px dotted black;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {
width: 26px;
height: 26px;
border: 2px solid;
border-radius: 5px;
/*checkbox border color*/
border-color: #737373;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {
width: 9px;
height: 15px;
/*checkmark arrow color*/
border: solid white;
border-width: 0 3px 3px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>
Original checkboxes:
</p>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Original checkbox
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" disabled>
<span class="checkbox-placeholder"></span>
Original checkbox disabled
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" checked>
<span class="checkbox-placeholder"></span>
Original checkbox checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap">
<input type="checkbox" checked disabled>
<span class="checkbox-placeholder"></span>
Original checkbox checked and disabled
</label>
</div>
<div class="checkbox">
<label class="checkbox-bootstrap checkbox-lg">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Large checkbox unchecked
</label>
</div>
<br/>
<p>
Inline checkboxes:
</p>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox">
<span class="checkbox-placeholder"></span>
Inline
</label>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox" disabled>
<span class="checkbox-placeholder"></span>
Inline disabled
</label>
<label class="checkbox-inline checkbox-bootstrap">
<input type="checkbox" checked disabled>
<span class="checkbox-placeholder"></span>
Inline checked and disabled
</label>
<label class="checkbox-inline checkbox-bootstrap checkbox-lg">
<input type="checkbox" checked>
<span class="checkbox-placeholder"></span>
Large inline checked
</label>
I used just "save in zoom", in example:
.my_checkbox {
width:5vw;
height:5vh;
}
I have used this library with sucess
http://plugins.krajee.com/checkbox-x
It requires jQuery and bootstrap 3.x
Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
Put the contents of the zip in a folder within your project
Pop the needed libs in your header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>
Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo
<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>
There are numerous other features as well if you browse the plugin site.
<div id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</div>
//do this on the css
div label input { margin-right:100px; }
just use simple css
.big-checkbox {width: 1.5rem; height: 1.5rem;top:0.5rem}
Aqui lo que me ayudo a solucionarlo:
.checkbox-xl .form-check-input
{
scale: 2.5;
}
.checkbox-xl .form-check-label
{
padding-left: 25px;
}
<div class="form-check checkbox-xl">
<input class="form-check-input" type="checkbox" value="1" id="checkbox-3" name="check1"/>
<label class="form-check-label" for="checkbox-3">Etiqueta</label>
</div>
I took the following HTML:
<div class="small-6 columns">
<input id="temp-id-2" class="replace-checkbox" type="checkbox" checked="checked">
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
And implemented it in razor:
<div class="small-6 columns">
#Html.CheckBoxFor(m => m.InventoryItem.Taxable, new { #class="replace-checkbox", id="temp-id-2" })
#Html.LabelFor(m => m.InventoryItem.Taxable, new { #class="checkbox-label", #for="temp-id-2" })
</div>
It is getting rendered like this:
<div class="small-6 columns">
<input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
<input name="InventoryItem.Taxable" type="hidden" value="false" />
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
And I have the following css:
form.app-form label.checkbox-label {
display: block;
visibility: visible;
font-weight: bold;
cursor: pointer;
color: #5c5c5c;
padding: 9px 10px;
padding-left: 40px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("../images/field-check-inactive-10.png");
background-position: right center; padding-left: 10px;
}
form.app-form .replace-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
form.app-form .replace-checkbox:checked + label.checkbox-label {
padding-left: 40px;
background-repeat: no-repeat;
background-position: 10px center;
background-image: url("../images/field-check-10.png");
background-position: right center;
padding-left: 10px;
}
When I run the plain HTML, I am able to check the checkbox and it changes from a greyed out check mark to a darkened in check mark. However, when I render it in razor, the checked state does not change. I noticed that the page is still detected that it is being checked because I can see the values change when I submit the form, but the css doesn't seem to get applied when it is in the checked state. I'm stumped. Any ideas?
As it turns out, the problem is with how MVC uses hidden fields to post data back to the controller. In this chunk:
<div class="small-6 columns">
<input checked="checked" class="replace-checkbox" data-val="true" data-val-required="The Taxable field is required." id="temp-id-2" name="InventoryItem.Taxable" type="checkbox" value="true" />
<input name="InventoryItem.Taxable" type="hidden" value="false" />
<label for="temp-id-2" class="checkbox-label">Taxable?</label>
</div>
It added the hidden field element which broke the css selector form.app-form .replace-checkbox:checked + label.checkbox-label which selects the label immediately following the checkbox. Since it no longer immediate follows the checkbox, it never gets applied.
My fix (for now) for this was to change the + to a ~
I am looking for a neat way to space my form elements but i am not so sure how to do it.
Currently,i am using the ordinary <br/> to space but i wonder if there was a better way of doing this using class or id
<form>
Message: <input type="text" class="msg" name="message" /><br/><br/>
<input type="submit" class="c-add" value="Add" />
<input type="submit" class="c-update" value="Update" />
</form>
I am thinking of
.c-add + .c-update{
margin-right:100px;
}
but that's not valid css.What would be the solution?
.c-add + .c-update is a valid CSS selector. It selects all elements with the "c-update" class that follow immediately an element with the "c-add" class. Example: DEMO (CSS Selector Reference)
Solution
You can seperate multiple selectors with a comma. You do not need to give each input a unique class name. That's only necessary if you want to style them uniquely. Since you did not provide information on how the expected result should look like, i made a demo with different solutions:
DEMO
HTML markup:
<form class="form">
<label>Message:</label><input type="text" class="msg" name="message" />
<input type="submit" class="add" value="Add" />
<input type="submit" class="update" value="Update" />
</form>
Note that i wrapped "Message" with label, which is better markup.
CSS to make a one-row inline form:
.form input {
margin-right: 0.5em;
}
.form label {
float: left;
margin-right: 0.5em;
}
CSS to make a multiple-row form:
.form input {
display: block;
margin-bottom: 1em;
}
.form label {
float: left;
margin-right: 0.5em;
}
You can mix both approaches by using specific classes for each input element or type.
Use a comma to separate selectors.
.c-add, .c-update {
The structure, perhaps this way:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<ul>
<li>
<label>
<span>Name</span>
<input type="text" name="name" />
<small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Email</span>
<input type="text" name="email" />
<small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Subject</span>
<input type="text" name="subject" />
<small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Message</span>
<textarea name="message" cols="80" rows="7"></textarea>
<small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<input type="submit" name="submit" value="Send" />
</li>
</ul>
</form>
And the CSS for the same:
* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}
You can see a live demo here: Demo
I'm having a problem with getting my radio buttons laid out (and checkboxes) correctly in IE8 .. Firefox, Chrome, Opera all working however ..
Here is a screenshot of the problem
The code is below:
.row input (line 471) {
float: left;
display: inline;
width: 16px;
height: 16px;
margin-top: 0pt;
margin-right: 5px;
margin-bottom: 0pt;
margin-left: 0pt;
}
.row label (line 479) {
float: none;
font-weight: normal;
font-size: 12px;
line-height: 16px;
}
div.panes label (line 70) {
font-size: 95%;
font-weight: bold;
color: #222222;
line-height: 150%;
padding-bottom: 3px;
display: block;
}
<label for="AdditionalResponses_0__Response" id="AdditionalResponses_0__Response_Label">Single answer</label>
<div class="row " id="AdditionalResponses_0__Response">
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
<label for="AdditionalResponses_0__Response_one" id="AdditionalResponses_0__Response_one_Label">one</label>
<input id="AdditionalResponses_0__Response_two" name="AdditionalResponses[0].Response" type="radio" value="two" />
<label for="AdditionalResponses_0__Response_two" id="AdditionalResponses_0__Response_two_Label">two</label>
<input id="AdditionalResponses_0__Response_three" name="AdditionalResponses[0].Response" type="radio" value="three" />
<label for="AdditionalResponses_0__Response_three" id="AdditionalResponses_0__Response_three_Label">three</label>
<input id="AdditionalResponses_0__Response_four" name="AdditionalResponses[0].Response" type="radio" value="four" />
<label for="AdditionalResponses_0__Response_four" id="AdditionalResponses_0__Response_four_Label">four</label>
</div>
Sorry for the one long line, but that's how I got it through the source..
Try removing the height or float from .row input.
Avoid adjusting the line-height if you can, as well.
Looks like another case of IE Stepdown: Preventing Menu Stepdown
Are you trying to align them vertically or horizontally?
If vertically, add this to your css
.row label {
display: block;
}
and change your markup so that your inputs are wrapped by the labels. You wouldn't have to use the for="" attribute this way.
<label>
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
one
</label>
If horizontally, add
.row input, .row label {
float: left;
display: block;
}
Im not sure but - did you try the clear property?
in your case the value would be left i think
w3 source