I need to add in my form a few customized <input type=“file”>
I tried to use this code
<div id="upload-file-container">
<input type="file" name="pic[]" class="photo" value="Add photo" />
</div>
CSS
#upload-file-container {
position: relative;
width: 50px;
height: 20px;
overflow: hidden;
}
#upload-file-container input {
position: absolute;
left: 0;
top: 0;
font-size: 20px;
opacity: 0;
margin: 0;
padding: 0;
border: none;
width: 50px;
height: 20px;
}
but my inputs just became invisible.
http://jsfiddle.net/FXTCg/4/
How to make visible input title "Add photo"?
take a look at this: http://jsfiddle.net/gabrieleromanato/mxq9R/ . Your input need to be invisible opacity: 0 becuase you cannot apply any style or custom text in it. You need to put your visible content underneath it
Related
I would like a div to be pushed down (see "Search while I move the map" in the screenshot), to float above the map, but so that if I use any constants for margin-top or top, then that's relative to the parent div (map), not the browser window.
How can I do so? Website link I have tried to add position: relative; to the parent #map but this is what I get (the map gets hidden):
This is my CSS code:
#map {
#searchCheckboxContainer {
position: absolute;
display: inline-table;
white-space: nowrap;
margin-top: 24px; // sure, this works, but it's 24px *from the browser window*
top: 0px; // any way to make it relative to the parent div (map)?
left: 50%;
transform: translateX(-50%);
background: rgb(255, 255, 255) !important;
}
#searchCheckboxContainer {
height: 40px;
}
}
HTML:
<div id="map" v-cloak>
<div id="searchCheckboxContainer">
<div id="searchCheckbox">
<input id="checkbox" class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Search as I move the map
</label>
</div>
</div>
<div id="mapid"></div>
</div>
Adding as an answer to avoid the comment noise:
All of the #map element children are positioned absolute. So, essentially they aren't in the normal document flow and will not affect the height of the #map div.
You need to add:
position: relative;
height: 100vh (or whatever)
To your #map div.
Then, to your #searchCheckboxContainer, add a z-index: 100 //could be anything but that worked
This will put the box above the map.
I assume you need it to look like that:
In this case you need to modify the following:
#map {
position: relative;
height: calc(100vh - 86px); // The height of header on mobile and you need to add responsive media queries to handle it.
}
#map #searchCheckboxContainer{
position: absolute;
display: inline-table;
white-space: nowrap;
margin-top: 0;
bottom: 0;
left: 0;
top: auto;
transform: none;
background: #ffffff !important;
z-index: 2;
width: 100%;
padding: 15px;
}
#searchCheckbox .form-check-input{
position: relative;
margin-top: 0;
margin-left: 0;
}
#map #mapid{
height: 100%;
width: 100%;
position: absolute;
background-color: yellow;
z-index: 1;
}
I got this css modal script and wondering why I can't replace <label> with <a> or <div> tag.
Also, What is the point of this line below? Why can't I replace <input> with something else like <div>?
Here's the complete CSS Code:
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background: #fff;
border-radius: 5px;
padding: 1em 2em;
height: 50%;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}
.modal__close:before {
transform: rotate(-45deg);
}
#media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
and HTML
<p>
<label class="btn" for="modal-1">Show me modal with a cat</label>
</p>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>The title!</h2>
<p>This is the body</p>
</div>
</div>
JSFIDDLE DEMO
Because clicking on a label will toggle a checkbox, but clicking on a link will go to another page and clicking on a div will do nothing.
The modal depends on the checked state of the input. A div can't be checked.
The whole thing is a nasty hack. It's clever, but nasty. Tracking state in order to display content based on user interaction is a job better handled by JavaScript.
You have to use a label as explained here
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
The label will change the state of the input[type=checkbox] when clicked, and can be placed anywhere on the document.
The input[type=checkbox] must be placed right next to the modal so the modal can be targeted with CSS:
input + .modal { display:none; }
input:checked + .modal { display:block}
The <label> element has a for="" attribute, it looks for the same value of id="" where you set on a form element.
Example: <label for="myid1">...</label> <input id="myid1"> when you click on the label it will change the state of the matching form element. They are normally next to each other in the markup, but not necessarily.
For <input type="checkbox">, you can capture :checked state in the CSS and change some style to itself or next siblings by using + or ~ selector. Which means that modal div needs to be a sibling of the checkbox and next to it.
All of these put in together is to use the label to control the div, a CSS way of making a modal without using any Javascript.
I have an input field and a submit button which looks like a question mark due to css styling. This is what it currently looks like:
How can I position the question mark inside the input field like this:
HTML
<div class="div">
<form method="post">
<input type="text" class="input">
<input type="submit" value="?" class="submit">
</form>
</div>
CSS
.div {
position: relative;
top: 50%;
transform: translateY(50%);
}
.input {
display: block;
margin: 0 auto;
width: 50%;
}
.submit {
background: none;
border: none;
}
JsFiddle: https://jsfiddle.net/TheCodesee/8h72tjcL/2/
You could use the question mark as a background image in the input field with some CSS, e.g.:
.form-input {
padding-right: 4rem;
background-image: url(your image);
background-repeat: no-repeat;
background-position: center right 1rem;
background-size: 2rem 2rem;
}
You may need to adjust the numbers depending on your image size of course. Your submit button may still exist, but you want to hide (via visibility or display). Thus, the use can still hit enter to submit the form.
Another possibility would be to auto submit the form on input blur.
Like that, you can avoid moving the button itself around.
Use position: absolute on your submit input.
.div {
position: relative;
top: 50%;
transform: translateY(50%);
width: 50%;
margin: 0 auto;
}
.input {
display: block;
margin: 0 auto;
width: 100%;
}
.submit {
border: none;
background: none;
outline: none;
position: absolute;
top: 2px;
right: 0px;
}
<div class="div">
<form method="post">
<input type="text" class="input">
<input type="submit" value="?" class="submit">
</form>
</div>
The issue I am having is that when I change the size of the font in my button, the button then resizes. As of now, I would like to keep the buttons at one specific size. So, I have fixed my buttons to a specific size but now I cannot change the font size. I am currently running my program on Chrome.
Here is the HTML chunk:
<div class="file-input-wrapper">
<button class="btn-file-input">Upload Documents</button>
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" />
</div>
<p>
<strong>Files You Selected:</strong>
<ul id="fileList">
<li>No Files Selected</li>
</ul>
<div class="file-input-wrapper1">
<button class="btn-file-input1">Upload Documents</button>
<input type="submit" value="Upload!" />
</div>
</p>
<style type="text/css">
.file-input-wrapper {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper>input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper>.btn-file-input {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper:hover>.btn-file-input {
background-color: #aaa;
}
.file-input-wrapper1 {
width: 400px;
height: 125px;
overflow: hidden;
position: relative;
}
.file-input-wrapper1>input[type="submit"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper1>.btn-file-input1 {
display: inline-block;
width: 400px;
height: 125px;
}
.file-input-wrapper1:hover>.btn-file-input1 {
background-color: #ffff00;
}
</style>
You can set the button font size with the following:
button {
font-size: 40px;
}
Since your buttons have a defined height and width, it should not change their dimensions.
Add an additional class to all your buttons. Even if you have some "buttons" that are not actually buttons, but instead input type="submit" or input type="button", add this class to all of those things.
Then do this in your CSS:
.some_class_added_to_all_buttons{
width: some-width;
height: some-height;
font-size: some-font-size;
}
if you have a button that already has a class, add an additional one like this
<button class="btn-file-input1 additional_class">Upload Documents</button>
i am using a custom file input on an upload page on my website and it is working as per my requirement the only issue is i have hidden the default layout of filetype="input" but i want to show the name of the file being uploaded so that the user may know which file he has uploadedand the name of the file here's the fiddle
JsFiddle
here's the html and css
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
</div>
.custom-upload {
position: relative;
height: 40px;
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #625f5b;
}
.custom-upload input[type=file]
{
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file
{
background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input
{
font-size:16px;
height:40px;
width: 100%;
}
Look at the JavaScript I added.
Note: I used jQuery. If you are using native JavaScript, I have to change the code
$(function(){
$("#fileToUpload").on('change',function(){
fpath = $(this).val();
$('#filePath').html('<b>You selected the file:</b> ' + fpath);
});
});
.custom-upload {
position: relative;
height: 40px;
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #625f5b;
}
.custom-upload input[type=file]
{
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file
{
background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input
{
font-size:16px;
height:40px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
<div id="filePath">
</div>
</div>
Another choise could be without using jquery, but pure javascript. This is my solution.
<span id='filename'></span>
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
</div>
<script>
document.getElementById('fileToUpload').addEventListener('change', function() {
var dest = document.getElementById('filename');
dest.innerHTML = document.getElementById('fileToUpload').value;
});
</script>
I let you the personalization of css of the elements to fit your needs.
Hope this help.