I want to create an overlay, which is shown, when an edit button is clicked. Only the edit fields should be visible through the overlay.
I have this div at the end of my html:
<div class='overlay closed'></div>
with following css:
.closed
{
display: none;
}
.overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
z-index: 70;
}
This correctly shows an overlay over the website.
I have several forms, which should be accesible while the overlay is visible.
For example:
<div class='edit-container closed'>
<form action="#" method='post'>
<textarea></textarea>
<input type='submit' value="safe" />
<input type='reset' value='cancel' />
</form>
</div>
i have tried following css to put those divs over the overlay:
#content.project .edit-container {
z-index: 71;
}
#content.project .edit-container * {
z-index: 71;
}
Can you tell me why, or what I am doing wrong?
Thanks in advance.
You need a position:relative; on edit-container
http://jsfiddle.net/hwh0nnxo/
HTML
<div class='edit-container'>
<form action="#" method='post'>
<textarea></textarea>
<input type='submit' value="safe" />
<input type='reset' value='cancel' />
</form>
</div>
<div class='overlay'></div>
CSS
.closed {
display: none;
}
.overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
z-index: 70;
}
.edit-container{
position: relative;
z-index: 71;
}
Related
How would I go about implementing the onclick animation seen on this Google login form?
As you click the button box, the placeholder text shrinks and moves to the top left and the button border forms around the text.
https://accounts.google.com/v3/signin/identifier?dsh=S906398310%3A1668018211534020&flowName=GlifWebSignIn&flowEntry=ServiceLogin&ifkv=ARgdvAv8SiraKrw6QlE0WDM_jQ_IMyyYjxsvr8JLQ_L2BGzFth9-H3ZsW5aunSdhTVq1iMWqAgCTtg
With pure CSS I would approach it like that:
<style>
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: -6px;
left: 0.5rem;
padding: 0.5rem;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
outline: 1px!important;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 50%;
background: white;
transition: 0.2s ease all;
}
</style>
<div style="position:relative; display:inline;">
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
That isn't a placeholder. Its just a label sitting absolute above an input field. There are 2 options.
First one is only html and css. But it only works if all input fields are required. So you cant send the formular if one is empty.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
#input:focus ~ .your-label,
#input:valid ~ .your-label {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" required />
<label class="your-label" for="input">Your Text</label>
</div>
</body>
Second one would be with js and you are able to send also forms that are empty.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
.your-label.active {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" />
<label class="your-label" for="input">Yourt Text</label>
</div>
</body>
<script>
const form_input = document.querySelectorAll("#input");
form_input.forEach((e) => {
e.addEventListener("focus", () => {
e.nextElementSibling.classList.add("active");
});
e.addEventListener("blur", () => {
if (e.value === "") {
e.nextElementSibling.classList.remove("active");
} else {
e.nextElementSibling.classList.add("active");
}
});
});
</script>
I can not write on over, I tried in several ways, but it still did not work, how do I do it?
I believe this is different because it is <input type="image"> and not <img> !
I want position the text on the image at the bottom
.centered {
position: absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
}
<div class="centered ">Example
<input type="image" id="MY_ID" src="img.png" class="btTxt submit " width="100" height="130" />
</div>
Don't try put an image on the input itself, use a wrapping div and add the image to that.
HTML
<div class="inputbutton">
<span class="text">Hello World!</span>
<input type="submit" class="btTxt submit" name="" value="">
</div>
CSS
div.inputbutton {
position: relative;
display: inline-block;
}
div.inputbutton input {
background: url('http://placehold.it/200x100') no-repeat;
cursor: pointer;
width: 200px;
height: 100px;
border: none;
}
span.text {
position: absolute;
bottom: 10px;
right: 10px;
}
JSFiddle:
https://jsfiddle.net/msyhoaak/18/
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>
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.
Am using the following code to change look of input file type, i just changed input select type as image and my problem is How can i hide input image URL
HTML
<form action="for.php" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple id="files" class="hidden"/>
<input type="submit" id="sub"/>
</form>
CSS
input[type="file"] {
border: 1px gray dashed;
background:no-repeat center gainsboro;
text-indent: -9999em;
line-height:3000;
width: 128px;
height: 128px;
}
How do i hide image name after selected
Just skip above code and use following code
HTML
<form action="for.php" method="POST" enctype="multipart/form-data">
<div class="inputWrapper">
<input type="file" name="files[]" multiple id="files" class="hidden fileInput"/>
</div>
<input type="submit" id="sub">
</form>
CSS
.inputWrapper {
overflow: hidden;
position: relative;
cursor: pointer;
background-color: #DDF;
border: 1px gray dashed;
background: url('file_add.png') no-repeat center gainsboro;
text-indent: -9999em;
width: 200px;
height: 200px;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
font-size:50px;
}
.hidden {
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
OUTPUT