i want create a functionality where i can upload a photo by clicking on the camera icon. Basically i want to do the same thing as when you click a button to choose a file you wanna upload, but i´m not finding a way to do that in the moment.
The html that i used to place the things
<div class="user-sidebar ">
<div class="profile-pic">
<img src="/img/pic.png" alt="" class="pic">
<form action="">
<input type="file" name="pic" accept="image/*">
<i class="fas fa-camera fa-2x"></i>
</form>
</div>
</div>
CSS related to the html
.user-sidebar {
width: 30vw;
height: 100vh;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
background-color: var(--white2);
}
.profile-pic {
margin: 100px auto 0px auto;
height: 170px;
width: 170px;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
overflow-y: hidden;
}
.profile-pic i {
position: absolute;
top: 230px;
left: 270px;
cursor: pointer;
color: var(--white);
}
I have added your solution click on icon for upload image .
.image-upload {
height: 170px;
width: 170px;
border-radius: 50%;
box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
margin: 100px auto 0px auto;
overflow-y: hidden;
}
.image-upload > input
{
display: none;
}
.image-upload img
{ width: 80px;
cursor: pointer;
position: absolute;
top: 212px;
left: 330px;
color: var(--white);
}
<div>Click the upload icon below to upload a file.</div>
<div class="image-upload">
<label for="file-input">
<img src="https://image.flaticon.com/icons/png/512/70/70310.png"/>
</label>
<input id="file-input" type="file"/>
</div>
Here is the solution, please change the classes name as you need and also the image path
Html
<div>Click the upload icon below to upload a file.</div>
<div class="image-upload">
<label for="file-input">
<img src="icons/mixed-12/130/188-512.png"/>
</label>
<input id="file-input" type="file"/>
</div>
Css
.image-upload {
height: 170px;
width: 170px;
border-radius: 50%;
box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
margin: 100px auto 0px auto;
overflow-y: hidden;
}
.image-upload > input
{
display: none;
}
.image-upload img
{ width: 80px;
cursor: pointer;
position: absolute;
top: 212px;
left: 630px;
color: var(--white);
}
Related
I have default checkboxes on my website, with only text on every checkbox(e.g. example).
Does it possible to design the checkboxes to have images on them? and maybe to put "v" mark on a checkbox if it been chosen?
I want it to look something like:
This is how you can simulate an image based checkbox using a label
input {
display: none
}
/* switch image */
label[for="chk1"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
background: url(http://placehold.it/100/ff0);
}
/* add content */
label[for="chk2"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
content: 'V';
position: absolute;
left: 0;
right: 0;
font-size: 90px;
font-weight: bold;
font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">
<label for="chk1"></label>
<label for="chk2"></label>
<div>Click a box to toggle it</div>
I don't think most people put images in their checkboxes. They either make an image act like a checkbox like #LGSon did, or they wrap an image and checkbox together inside of a div. Something like this:
function toggleCheck(sibling) {
var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
checkBox.checked = !checkBox.checked;
}
.image-box {
width: 150px;
text-align: center;
background: #E9E8E7;
padding: 10px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
max-width: 100%;
display: block;
margin-bottom: 7px;
}
<div class="image-box">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
<input id="dogs" type="checkbox" name="dogs" value="Dog">
<label for="dogs">I like dogs</label>
</div>
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}
Hi I'm doing a live search with ajax. I want to align the form and the ul.
here my form
<div align="right">
<form method="post" action="" id="search" class="kb-search">
<input type="text" id="kbsearch" name="kbsearch" placeholder="Knowledge Base" autocomplete="off">
<input type="hidden" name="action" value="searchKB"/>
</form>
<ul id="results"></ul>
</div>
and here my css
.kb-search {
width: 250px;
}
#results {
text-align:left;
width: 250px;
background: #ffffff;
padding: 5px 10px;
max-height: 400px;
overflow: auto;
position: absolute;
z-index: 99;
border: 1px solid #A9A9A9;
border-width: 0 1px 1px 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
How can I do this:
You can set the parent div position to relative.. then to the #results add right: 0.. I think this will do..
Define your parent div position:relative;
#results{
top: 8px;
left: 2px;
}
Demo
You parent div needs to have position: relative so that you can position elements inside relevant to it. So
<div align="right" style="position: relative;">
Then
#results {
position: absolute;
left: 0;
top: 25px; /* e.g Offset it by the height of the input field */
...
}
The best and most reusable way to do this is:
div {
position: relative;
}
#results {
position: absolute;
top: 100%;
right: 0;
}
By setting the results to top: 100% ensures that the results will always sit underneath the search box regardless of the height of it.
This is by far the better way, as putting a specific pixel value for top is quite brittle and unresuable.
Fiddle
maybe this is your Answer:
<style>
#kbsearch {
width: 250px;
}
#results{
text-align:left;
width: 234px;
background: #ffffff;
padding: 5px 10px;
max-height: 400px;
overflow: auto;
margin-top:-5px;
z-index: 99;
border: 1px solid #A9A9A9;
border-width: 0 1px 1px 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
</style>
and put this in body or other place what you like:
<div>
<form method="post" action="" id="search" class="kb-search">
<input type="text" id="kbsearch" name="kbsearch" placeholder="Knowledge Base" autocomplete="off">
<input type="hidden" name="action" value="searchKB"/>
</form>
<ul id="results">f</ul>
</div>
I want to create a page like in image
Problem:
Main box Shadow not coming as in image.
I have tried with my own HTMl and CSS code.
Here is fiddle
http://jsfiddle.net/EE6hU/
HTML
<div class='wrapper' id='id_wrapper'>
<div class='main'> <span class='online_survey'>Online Survey</span>
<div class='login_box'>
<div class='login'>
<form>
<div class='label'>username</div>
<input type='text' name='username' class='loginInput' placeholder='moderator' />
<div style='clear:both'></div>
<div class='label'>password</div>
<input type='password' name='password' class='loginInput' placeholder='*********' />
<div style="clear:both"></div>
<input type='checkbox' name='remember' class='check' />
<div class='remember'>Remember me</div>
<input type='submit' name='submit' class='submit_button' value='submit' />
</form>
</div>
<div class='forget_pass'><a href='#'>Forget Password</a>
</div>
</div>
</div>
</div>
CSS
.wrapper {
background:#313131;
height:645px;
}
.main {
margin: 0 auto;
position: relative;
top: 20%;
width: 500px;
}
.online_survey {
bottom: 10px;
color: #FFFFFF;
font-size: 20px;
margin-left: 15px;
position: relative;
}
.user_name {
}
.login_box {
background: none repeat scroll 0 0 #7D7D7D;
border: 1px solid #98B2C9;
border-radius: 20px;
padding: 8px;
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
}
.loginInput {
background:#313131;
border-radius: 5px;
float: left;
height: 30px;
width: 200px;
margin: 5px;
padding:5px;
color:#ffffff;
}
.label {
float: left;
height: 30px;
width: 140px;
}
.login {
padding: 30px;
}
.forget_pass a {
color: white;
text-decoration:none;
}
.submit_button {
}
.check {
float: left;
margin-left: 140px;
margin-right: 5px;
}
ge.
Stacking shadows of various sizes might get you close.
http://jsfiddle.net/isherwood/EE6hU/1
.login_box {
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75),
0 0 150px rgba(255,255,255,0.5),
0 0 250px rgba(255,255,255,0.5);
}
I may have to eat my own words. Here's a way to get the narrower white shadow in your image:
http://jsfiddle.net/isherwood/EE6hU/4
.login_box {
...
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
margin: 0 -150px;
}
.login_box_shadow {
overflow: visible;
border-radius: 20px;
box-shadow: 0 0 150px rgba(255, 255, 255, 0.5),
0 0 250px rgba(255, 255, 255, 0.5);
margin: 0 150px;
}
I have this div that is absolute-positioned under a fixed div. I then tried to insert a form with an <input> in it, and it won't let me input anything.
#navbar {
width: 100%;
padding: 30px;
position: fixed;
background-color: #0066CC;
box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
}
#main_index {
left: 8%;
right: 8%;
width: 85%;
top: 300px;
z-index: -1;
min-height: 100px;
position: absolute;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
<div id="navbar"><center><b>NAVBAR</b></center></div>
<div id="main_index">
<div id="index_login">
<form action="login" method="post">
<input type="text" required="required" name="username">
<br />
<input type="password" required="required" name="password">
</form>
</div>
</div>
I believe at least part of your problem is the center tag has been depriciated. Use a style sheet with the attribute "align:center;" and apply it to your DIV.
I think you should try with:
#navbar {
width: 100%;
padding: 30px;
position: fixed;
z-index: 2;<----------------------bigger than #main_index
background-color: #0066CC;
box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 40px 3px rgba(0, 0, 0, 0.5);
}
#main_index {
left: 8%;
right: 8%;
width: 85%;
top: 300px;
z-index: 1;<--------------------- positive
min-height: 100px;
position: absolute;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
I'm not really sure how the rest of your html looks like but are you sure that the #navbar isn't overflowing over your #main_index div. Try adding for testing purposes:
height:100px;
overflow:hidden;
on your #navbar css style and see what happens.