I am creating a simple file-upload web. This is the code that i have:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<button type="submit" value="Upload!">Upload</button>
</form>
I've seen a lot questions pretty much like mine but I couldn't find a solution. Maybe I can't apply them to my code. Not sure how to use labels cause after I create one it appears as text and I am not able to style it like a button. Also a piece of space stays blank, after i change the opacity of the <input type="file" id="upload-photo" name="files[]" to 0.Any advice would be helpful.
Thanks in advance.
Check this snippet
What you need to do is to provide a label for the input field and style as it would be a button
#upload-photo {
height: 0;
width: 0;
}
#upload-photo-label {
border: 1px solid #cccccc;
padding: 5px 30px;
font-family:arial;
font-size: 13px;
}
#upload-photo-label:active{
background:#ccc;
}
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<label id="upload-photo-label" for="upload-photo">Browse</label>
<button type="submit" value="Upload!">Upload</button>
</form>
you can do it like this
Html
<div class="box">
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple style="display: none;" />
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file…</span></label>
</div>
Css
.box {
background-color: #dfc8ca;
padding: 6.25rem 1.25rem;
}
.js .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
button, input {
line-height: normal;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
inputfile-1 + label {
color: #f1e5e6;
background-color: #d3394c;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
svg:not(:root) {
overflow: hidden;
}
.inputfile-1 + label {
color: #f1e5e6;
background-color: #d3394c;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
here demo link https://jsfiddle.net/7we705q1/5/
Related
I ask this because the text that the user inputs in the textarea is different from the another fields.
The font style is different. How can I change to font style of this field area?
First of all I want to fix that and after that if styling is possible I want to learn how.
.contact-form {
background-color: white;
}
input,
select,
textarea {
background-color: #f2f2f2;
display: block;
margin: auto;
font-size: 1em;
padding: 25px;
border: none;
outline: none;
margin-top: 20px;
margin-bottom: 16px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
font-family: avenir_nextdemi_bold;
background-color: #437bff;
font-size: 1.2em;
color: white;
padding: 12px 20px;
border-radius: 30px;
width: 15%;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #133edb;
}
::placeholder {
font-family: avenir_nextdemi_bold;
}
textarea {
height: 200px;
}
<form action="/action_page.php">
<input type="text" id="lname" name="lastname" placeholder="Naam" required>
<input type="email" id="email" name="email" placeholder="Email adres" required>
<textarea id="subject" name="subject" placeholder="Vertel ons over je project" required></textarea>
<input type="submit" value="Submit">
</form>
All you need to do is add font-family: sans-serif; Here is how it would look in the code:
input,
select,
textarea {
background-color: #f2f2f2;
display: block;
margin: auto;
font-size: 1em;
padding: 25px;
border: none;
outline: none;
margin-top: 20px;
margin-bottom: 16px;
box-sizing: border-box;
resize: vertical;
font-family: sans-serif;
/* You can change the font if you want but based on what I saw I assumed
you wanted sans-serif. It would also be helpful for you to specify what you mean
style text */
}
I am trying to create a text area in WordPress where I can type/paste any text and by clicking on the button, all of them should be UPPER/lower CASE (using HTML and CSS).
Here is the code I have added to the top of the content:
HTML area;
<div id="form">
<textarea placeholder="Type or paste text here"></textarea>
<div class="wp-block-columns">
<div class="wp-block-column"><button type="button" class="uppercase">UPPER CASE</button></div>
<div class="wp-block-column"><button type="button" class="lowercase">lower case</button></div>
</div>
</div>
Here is the CSS that I used in theme custom CSS setting:
#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
.wp-block-column.uppercase {
text-transform: uppercase;
}
.wp-block-column.lowercase {
text-transform: lowercase;
}
The text area is fine, buttons are good but the text is not converting. I am new and tried many things all day so now I need expert advice. Thanks
You can easily do it using input and label HTML tags. Here's the code:
HTML:
HTML area;
<input type="radio" name="case" id="upper-case">
<input type="radio" name="case" id="lower-case">
<div id="form">
<textarea class="a" placeholder="Type or paste text here"></textarea>
<div class="wp-block-columns">
<div class="wp-block-column">
<label class="uppercase" for="upper-case">
UPPER CASE
</label>
</div>
<div class="wp-block-column">
<label class="lowercase" for="lower-case">
lower case
</label>
</div>
</div>
</div>
CSS:
#form textarea {
height: 25vh;
min-height: 7.25em;
max-height: 67vh;
resize: vertical;
}
#form .wp-block-columns {
margin: 0;
}
#form .wp-block-column {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#form button {
width: 100%;
}
#upper-case:checked ~ #form textarea {
text-transform: uppercase;
}
#lower-case:checked ~ #form textarea {
text-transform: lowercase;
}
input {
visibility: hidden;
}
label {
display: block;
text-align: center;
background-color: lightgrey;
padding: 5px;
border-radius: 20px;
cursor: pointer;
}
I want to align those two buttons (Login and Registrar) at the same level but as they are different forms "Registrar" button is being placed on the "next line".
Here is the issue, visually:
Here is the code:
HTML
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
</form>
<form action="registro.html" method="GET">
<input type="submit" id="register" value="Registrar">
</form>
</section>
CSS:
header > section.header_form_login{
font-weight: 500;
align-items: right;
padding: 5px;
margin: auto;
margin-right: 20px;
}
header > section.header_form_login > form > input#user{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
header > section.header_form_login > form > input#pass{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: flex;
float: right;
margin-top: 10px;
}
Thanks a lot!!!
PD: Feel free to give me recommendations, I'm kinda new to html and css coding.
I need help with html and css, specifically, with buttons being placed at the same level vertically but from different forms
Update: Refactored CSS to share styles.
I would restructure your HTML and fix your CSS to get things working properly. Also, when using ids, they are meant to be unique, so there's no need for a long lookup query such as:
header > section.header_form_login > form > input#login { … }
Just use
#login { … }
To make the "buttons" align, I made the register input a link. This is pretty standard. Then I added some CSS to align these elements on the same line.
.form-buttons {
display: flex;
flex-wrap: nowrap;
}
Here is how I could restructure your markup and styles.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header_form_login {
font-weight: 500;
padding: 5px;
margin: auto;
width: 250px;
max-width: 100%;
}
#user,
#pass {
width: 100%;
padding: 5px;
border: 1px solid lightgray;
}
/* BUTTONS */
#login,
#register {
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
text-align: center;
flex: 1;
}
#login {
margin-right: 2.5px;
}
#register {
margin-left: 2.5px;
}
.form-buttons {
padding-top: 10px;
display: flex;
flex-wrap: nowrap;
}
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass">Contraseña:</label>
<input type="text" id="pass" name="pass">
<div class="form-buttons">
<input type="submit" id="login" value="Login">
Register
</div>
</form>
</section>
jsFiddle
I don't generally like there being two forms in the same place to drive 2 actions. Assuming that you don't need username and password sending to your register page, then I would implement as follows:
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
Registrar
</form>
</section>
CSS for Buttons:
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
I have html search form - input and button.
Also I have Search title - h2 . But if I remove h2 title I have problem with button vertical-align.
html:
<h2 class="widget-title">Search</h2>
<form role="search" method="get" id="searchform" action="#">
<input type="text" placeholder="Search..." value="" >
<button type="submit" id="searchsubmit" value="">
<i class="fa fa-search"></i>
</button>
</form>
Css:
.widget-title {
margin-bottom: 40px;
font-size: 22px;
line-height: 18px;
}
#searchform input {
display: block;
max-width: 100%;
padding: 5px 10px;
border: 1px solid #ccc;
}
#searchsubmit {
position: absolute;
top: 59px;
right: 15px;
display: inline-block;
width: 50px !important;
height: 43px;
padding: 0;
border: none;
margin-bottom: 0;
vertical-align: middle;
background-color: transparent;
}
Is it possible to align button with and without search title (h2) ?
You don't need to use absolute positioning here, relative will be OK. position: relative and display: inline will solve the problem. And here is the working
js fiddle.
The markup is OK with <h2 class="widget-title">Search</h2> and without.
I have a form in which I want to show the input text field and submit on the same line. The input text field has two FontAwesome icons which I want to show inside the text field. I can style the form as I want when I don't use the easy Autocomplete plugin. But when I activate the easyAutocomplete plugin, the styling goes haywire.
Here's the code:
HTML:
<form role="search" method="get" id="searchform" class="searchform" action="">
<span class="fa fa-map-marker my-fa"></span>
<input type="text" value="" name="s" id="search-input" class="s" placeholder="Enter your Postcode" autocomplete="off">
<img id="slider-loading" class="loading" src="https://www.imageupload.co.uk/images/2017/02/05/gps2.gif" />
<input type="hidden" value="profile" name="post_type" id="post_type" />
<input type="hidden" value="country" name="taxonomy" />
<input type="submit" id="searchsubmit" value="GO" class="submit btn" />
</form>
jQuery
var options = {
data: ["Cyclops", "Storm", "Mystique", "Wolverine", "Professor X", "Magneto"],
theme: "dark"
};
$("#search-input").easyAutocomplete(options);
CSS:
.searchform {
position: relative;
text-align: center;
}
.searchform input[type="text"] {
width: 400px;
font-size: 15px;
margin: 0px -3px 0px 0px;
text-indent: 18px;
padding: 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
font-family: 'Raleway', sans-serif;
border: solid 1px #bbb;
overflow: hidden;
border-radius: 4px;
}
.searchform input[type=text],
.searchform input[type=text]:focus {
outline: none;
}
.searchform input[type=text]:focus {
border: none;
}
.searchform input[type="submit"] {
background-color: #f70808;
-webkit-box-shadow: 0 2px 0 #c60606;
-moz-box-shadow: 0 2px 0 #c60606;
box-shadow: 0 2px 0 #c60606;
color: white;
border: none;
letter-spacing: 1px;
padding: 15px;
font-size: 15px;
text-align: center;
}
.searchform input[type="submit"],
.searchform input[type="text"] {
line-height: normal !important;
display: inline-block;
}
.my-fa {
font-family: 'FontAwesome';
position: absolute;
z-index: 2;
color: #f70808;
font-size: 2.8em;
margin-left: 4px;
top: 4px;
}
#slider-loading {
position: relative;
top: 12px;
right: 35px;
}
I want to show the map icon on the left of the input text field and and the loading spinner on the right of the input text field.
JSFiddle - with easyAutocomplete plugin
JsFiddle - without the plugin
You could add the following code to your CSS:
.easy-autocomplete{
display:inline;
}
I think it gives you the desired outcome.
The plugin wraps the input in a div which by default have display:block and it throws the other elements out of line.
You may need to adjust the padding/margin to your preference.
See updated fiddle