how does one position a html element in front of another so that when one a particular element is hovered over the new element will appear in front of it.
here is my code:
<div class="third">
<label> Enter Password: </label>
<input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
<p id="tooltipbox" style="visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
</div>
i have a tooltip and it works so far. but when i hover over the textarea it shoves the element below it downwards so that the tooltip can fit in on the page and when i move the mouse so to 'unhover' it, the element re positions upwards. i want a way when i hover, a message box is brought to the front and all the elements underneath do not move. much like when you hover any links on this page, they bring up a little dialog box which is only there on hover and DOES NOT reposition other elements on the page.
You need to specify z-index and position property; for example:
p#tooltipbox{
z-index:1000;
position:absolute;
top:0;//move the element to the top of div.third of div.third
left:0;//if you want to move the element to the left;
}
div.third{
position:relative;
}
here's more information
z-index property
position propery
I created a jsfiddle for you. Click the following link to see an example:
http://jsfiddle.net/xL7j4k6g/
Refer to the link above, but here is also the code:
.fieldarea {
position: relative;
border: 1px solid red;
width: 50%;
}
.fieldarea label {
width: 35%;
display: inline-block;
}
.fieldarea input {
width: 50%;
display: inline-block;
}
.tooltipbox {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
max-width: 200px;
border: 1px solid gray;
background-color: yellow;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fieldarea:hover .tooltipbox {
opacity: 1;
}
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
<div class="fieldarea">
<label for="pword1">Enter Password:</label>
<input type="text" name="pword1" placeholder="choose a password" autocomplete="off">
<div class="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</div>
</div>
(This doesn't look "cool" but works. I'd recommend looking into CSS3 transitions to some nice transformation touches - e.g. fade in the tooltip on hover.)
Thanks,
David
You can use absolute positioning and jQuery. This is not perfect but a simple example.
$(document).ready(function() {
$('.box1').hover(function() {
$('.box2').toggleClass('active')
})
})
.wrapper {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
border: 2px solid black;
background-color: white;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 100;
background-color: red;
}
.active {
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I currently have some javascript functions applied to multiple buttons that trigger a popup, showing more content. I want to make a function that triggers a blur background animation once any of those buttons are clicked, and another animation where the popup sliding in from the top. Any help will be appreciate
document.querySelectorAll(".button a").forEach((a)=>{a.addEventListener("click",toggle);});
document.querySelectorAll(".popup a:last-child").forEach((a)=>{a.addEventListener("click",close);});
function toggle()
{
this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}
function close()
{
this.parentElement.classList.toggle("active"); // .popup
}
This is the CSS for that function.
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
And the HTML:
<div class="container">
<div class="box button">
HURRICANE TRACK
</div>
<div class="popup">
<h2>HURRICANE TRACKING</h2>
<video src="python_movies/hurricanetrack.mov"controls></video>
<p>
A Python project that prompts the user for a file containing hurricane information in order to form a dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind speed. The program graphs all of the corresponding information by adding the information on a table, graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind speed.
</p>
CLOSE
</div>
<div class="box button">
NINE MEN'S MORRIS
</div>
<div class="popup">
<h2>NINE MEN'S MORRIS</h2>
<video src="python_movies/ninemensmorris.mov"controls></video>
<p>
A Python Project that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to win), or by leaving them without a legal move. The game proceeds in three phases, however, this project handles the first phase.
</p>
CLOSE
</div>
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggleClass("active");
});
});
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<p>HEllo how r u?</p>
</div>
See this Snippet. It will help you.
$(document).ready(function(){
$(".button").click(function(){
$(".popup").toggle(800);
});
});
.popup
{
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>
You can do like this also below is the sample code
$(document).ready(function() {
$(".button").click(function() {
$(".popup").slideToggle(500);
});
});
.popup {
display: none;
visibility: visible;
position: fixed;
left: 0;
width: 100%;
padding: 0;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #A6A6A6;
z-index: 99999999;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
Click
<div class="popup">
<h2 style="text-align:center">
Your Dummy Text
</h2>
</div>
I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a <div> which will dim all elements except a specific region which is in a fixed width, height, top and left.
The problem is, I cannot find a way to "cancel" the parent's background-color (which is also transparent).
In the snipped below, hole is the div that is supposed to be without any background-color, including its parent's.
Can this be accomplished at all? Any ideas?
#bg{
background-color:gray;
opacity:0.6;
width:100%;
height:100vh;
}
#hole{
position:fixed;
top:100px;
left:100px;
width:100px;
height:100px;
}
<div id="bg">
<div id="hole"></div>
</div>
Here's a mockup image of what I'm trying to achieve:
You could do it with just one div and give it a box-shadow.
EDIT:
as #Nick Shvelidze pointed out, you should consider adding pointer-events: none
Added vmax value for box-shadow as #Prinzhorn suggested
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* for IE */
box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
/* for real browsers */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
You can create an SVG which is filled with a path that has the hole where you need it to. But I guess than you need to find a way to handle clicks, since all of them will be targeted to the overlaid svg. I thing document.getElementFromPoint can help you here. mdn
This can also be done similarly to #VilleKoo's answer, but with a border.
div {
border-style: solid;
border-color: rgba(0,0,0,.3);
pointer-events: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
border-width: 40px 300px 50px 60px;
}
<div></div>
You can achieve the same as in VilleKoo's answer using CSS outline property. It has excellent browser support (and works also in IE8+). Outlines have the same syntax as borders, but unlike border they don't take up space, they are drawn above the content.
Also for IE9+ you can replace 99999px with calc(100 * (1vh + 1vw - 1vmin)).
Disadvantage of this approach is that outline is not affected by border-radius.
Demo:
div {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
/* IE8 */
outline: 99999px solid rgba(0,0,0,.3);
/* IE9+ */
outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
/* for other browsers */
outline: 100vmax solid rgba(0,0,0,.3);
pointer-events: none;
}
<div></div>
Here is simple jQuery code using #VilleKoo css
var Dimmer = (function(){
var el = $(".dimmer");
return {
showAt: function(x, y) {
el
.css({
left: x,
top: y,
})
.removeClass("hidden");
},
hide: function() {
el.addClass("hidden");
}
}
}());
$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });
.dimmer {
position: fixed;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
box-shadow: 0 0 0 1000px rgba(0,0,0,.3); /* for IE */
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* for real browsers */
pointer-events: none;
}
.hidden { display: none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="text">
<select name="" id=""></select>
<input type="checkbox">
</div>
<div>
<input type="submit" disabled>
</div>
<input type="button" value="Hide" class="btn-hide">
<input type="button" value="Show" class="btn-show">
<div class="dimmer hidden"></div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
#bg {
background-color: gray;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998;
}
#hole {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
z-index: 99999;
}
Does anyone know how to insert a tooltip for a phrase in HTML as you write without too much of code?
The idea is that it shouldn't be a huge block of code, but relatively short, and easily insertable.
An imaginary example: <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>
The purpose is for when you are writing an article, to add a tooltip explaining what a word or phrase means, but without requiring much effort, or taking too much space on the code.
One alternative I found is this, but it's a huge block of code and it takes a lot of space, also I do not know how to apply this to several phrases, it seems like you need to add a div for every tooltip you want to show.
And I already do know about Bannana but it doesn't allow for styles, and does not show up on phones.
Take a look at this.
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me2
<span class="tooltiptext">Tooltip text again</span>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me3
<p class="tooltiptext">Tooltip text</p>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h1 class="tooltiptext">Tooltip text</h1>
</div>
<br/>
<br/>
<div class="tooltip">Hover over me
<h2 class="tooltiptext">Tooltip text</h2>
</div>
</body>
</html>
This is courtesy of W3schools. Just note that all of the css in there is not necessary, you just need some to make the tooltip actually work
What you need is library based on Angular-like directives. Every aspect of tooltip may be described directly in html in place of usage. Take a look at:
https://angular-ui.github.io/bootstrap/#/popover
Example of usage:
<button uib-popover="I appeared on mouse enter!"
popover-trigger="'mouseenter'" type="button">Mouseenter</button>
Please try this.
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip:after {
position: absolute;
background: rgba(140,180,140,.5);
content: attr(data-tooltip);
bottom: 100%;
left: 0;
max-width: 200px;
opacity: 0;
transition: all ease .3s;
padding: 5px;
border-radius: 7px;
}
.tooltip:hover:after {
opacity: 1;
}
<h1>Tooltip Example</h1>
<div class="tooltip" data-tooltip="My tips">
Hover over me
<div>
How do I put an icon inside a form's input element?
Live version at: Tidal Force theme
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.
In other words, they have these two CSS rules:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
The CSS solutions posted by others are the best way to accomplish this.
If that should give you any problems (read Internet Explorer 6), you can also use a borderless input inside of a div.
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
It is not as "clean", but it should work on older browsers.
A solution without background-images:
.icon {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}
<input type="text" class="icon" value placeholder="Search">
Or for right to left icon
.icon-rtl {
padding-right: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
background-size: 20px;
}
<input type="text" class="icon-rtl" value placeholder="Search">
You can try this:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
I find this to be the best and cleanest solution. Using text-indent on the input element:
#icon {
background-image: url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
A simple and easy way to position an icon inside of an input is to use the position CSS property as shown in the code below.
Note: I have simplified the code for clarity purposes.
Create the container surrounding the input and icon.
Set the container position as relative
Set the icon as position absolute. This will position the icon relative to the surrounding container.
Use either top, left, bottom, right to position the icon in the container.
Set the padding inside the input so the text does not overlap the icon.
#input-container {
position: relative;
}
#input-container > img {
position: absolute;
top: 12px;
left: 15px;
}
#input-container > input {
padding-left: 40px;
}
<div id="input-container">
<img/>
<input/>
</div>
This works for me:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
Use:
.icon{
background: url(1.jpg) no-repeat;
padding-left: 25px;
}
Add the above tags into your CSS file and use the specified class.
Use this CSS class for your input at the start, and then customize accordingly:
.inp-icon {
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
}
<input class="inp-icon" type="text">
You can try this: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
<div class="container">
<form>
<div class="row">
<div class="input-group mb-3 col-sm-6">
<input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
</form>
</div>
I achieved this with the code below.
First, you flex the container which makes the input and the icon be on the same line. Aligning items makes them be on the same level.
Then, make the input take up 100% of the width regardless. Give the icon absolute positioning which allows it to overlap with the input.
Then add right padding to the input so the text typed in doesn't get to the icon. And finally use the right CSS property to give the icon some space from the edge of the input.
Note: The Icon tag could be a real icon if you are working with ReactJs or a placeholder for any other way you work with icons in your project.
.inputContainer {
display: flex;
align-items: center;
position: relative;
}
.input {
width: 100%;
padding-right: 40px;
}
.inputIcon {
position: absolute;
right: 10px;
}
<div class="inputContainer">
<input class="input" />
<Icon class="inputIcon" />
</div>
Just use the background property in your CSS.
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
I had situation like this. It didn't work because of background: #ebebeb;. I wanted to put background on the input field and that property was constantly showing up on the top of the background image, and i couldn't see the image! So, I moved the background property to be above the background-image property and it worked.
input[type='text'] {
border: 0;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
background: #ebebeb;
}
Solution for my case was:
input[type='text'] {
border: 0;
background: #ebebeb;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
}
Just to mention, border, padding and text-align properties are not important for the solution. I just replicated my original code.
Using with font-icon
<input name="foo" type="text" placeholder="">
OR
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
I was able to add an icon to an input field by adding the icon as a background image through CSS. From there, you can adjust the size of the image using the background-size property and finally, position the element with the background-position-x and background-position-y properties. I've shared a code snippet below and linked to a working example in Codepen here:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.input-container {
padding: 50px;
}
input {
box-sizing: border-box;
width: 250px;
padding-left: 36px;
height: 48px;
background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg');
background-size: 20px;
background-position-x: 10px;
background-position-y: 50%;
background-repeat: no-repeat;
border-radius: 15px;
}
<!DOCTYPE>
<html>
<head>
<title>Icon Inside Input Field</title>
</head>
<body>
<div class="input-container">
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" placeholder="iram.the.goat#mailer.com">
</div>
</body>
</html>
https://codepen.io/Iram_Tech/pen/GRQqrNg
<label for="fileEdit">
<i class="fa fa-cloud-upload">
</i>
<input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
</label>
For example you can use this : label with hidden input (icon is present).
I didn't want to change the background of my input text neither. It will work with my SVG icon.
I added a negative margin to the icon, so it appeared inside the input box.
And adding the same value padding to the input, so the text wouldn't go under the icon.
<div class="search-input-container">
<input
type="text"
class="search-input"
style="padding-right : 30px;"
/>
<img
src="#/assets/search-icon.svg"
style="margin-left: -30px;"
/>
</div>
The inline-style is for readability. Consider using classes.
You could go for a different approach which also allows you to click it and have it do a function. Have a look at the example below:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #FFF; /* CSS Edit Here */
}
#search-bar > button {
background: #FFF;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
The CSS background solutions do it for most cases, but it has a problem with WebKit (chrome) autocomplete where the icon disappear.
There are other solutions that includes changing the HTML/DOM structure by wrapping the input in a div and adding an extra element (img, div, or similar).
I don't like does solutions because you need to tweak the elements CSS with absolute positions and/or resizing by pixel to get the right place.
Or recreate the input border to "merge" input and img in one.
So this solution is based on a CSS background image not applied over the input element, but applied over a wrapper div.
HTML:
<div class="input-email">
<input type="text" placeholder="Email" name="email" id="email">
</div>
CSS:
.input-email {
background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
display: inline-block;
}
.input-email input{
padding-left: 40px;
background-color: transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
This way with .input-email class I define my icon image as div background (not affected by WebKit autocomplete background).
Next .input-email input definition I pad left the input element to give space for the image and set it as transparent (this works when autocomplete is not applied)
Finally with webkit-autofill classes I remove with transition the background-color set by the autocomplete.
Note: at point 2 I set transparent !important because this -internal-autofill-selected gets rendered at browser and I couldn't overwrite it without setting my also as !important:
input:-internal-autofill-selected {
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
I got my solution from this post https://www.py4u.net/discuss/1069380.
I have make some tweaks, though major credits are to them.
In case, if you have <i class=''></i> with imported fonts, background: ... (some png) implementation will not be suited for you.
So try this one:
<div class="parent">
<form action='' method='post'>
<i class="fa-solid fa-paperclip"></i>
<input type="text" name="message" placeholder="Type...">
</form>
</div>
.parent > form > i {
position: absolute;
}
.parent > form > input {
text-indent: 40px
}
then, use margin to set Icon inside and text-indent to move placeholder's text.
...
...
Here is full example of my code
.parent {
width: 100%;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.parent > form > i {
margin-left: 24px;
margin-top: 13px;
position: absolute;
}
.parent > form > input {
width: 70%;
height: 40px;
margin-left: 8px;
text-indent: 40px;
}
.input_container {
display: flex;
border-bottom: solid 1px grey;
transition: border-color 0.1s ease-in;
background: white;
}
.input {
color: blue;
display: block;
width: calc(100% - 20px);
border: none;
outline: none;
padding: 8px 16px;
}
.input_img {
flex-basis: 20px;
display: inline-block;
padding: 8px 16px;
cursor: pointer;
}
<div class="input_container">
<input type="text" class="input" value>
<span class="input_img" data-role="toggle">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
fill="currentColor"
/>
</svg>
</span>
</div>
This works for me for more or less standard forms:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
I have a main div. Inside the div, I have an image. I want to place a text field and a button at a specific position on top of the image. Both of them should be transparent so that the users feels that they are writing on top of the image.
My question is how is this best solvable? Is it to make a div that contains those two and place the div in correct position using CSS? Or is there some kind of javascript I could use?
Also, when I hover over the button, I want it to replace the image with a new image.
I made a Fiddle on how it looks like. Here is the code from that fiddle.
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:147px;
top:472px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
position: absolute;
left: 165px;
}
.formcodeaktiv {
left: 5px;
position: absolute;
}
This is my solution, but please, read #Chandranshu advices:
HTML
<form>
<div class="iphone">
<div>
<input type="text"/>
<button></button>
</div>
</div>
</form>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.iphone {
position: relative;
width: 317px;
height: 595px;
background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}
div.iphone div {
position: absolute;
bottom: 122px;
left: 71px;
}
div.iphone div > * {
display: block;
float: left;
padding: 0;
margin: 0;
border: none;
background: transparent;
appearance: none;
border-radius: 10px;
outline: 0;
}
div.iphone input {
line-height: 10px;
width: 148px;
height: 10px;
padding: 5px;
background: #fff;
}
div.iphone button {
margin-left: 5px;
width: 50px;
height: 20px;
cursor: pointer;
}
http://jsfiddle.net/coma/jXCS3/
I've just updated my jsfiddle to show you the benefits of using position relative on the container and absolute on its children (try resizing the textarea):
http://jsfiddle.net/coma/jXCS3/4/
I have updated your jsfiddle to 'almost' solve your problem. Here is the updated code:
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" placeholder="Skriv in aktiveringskoden"/>
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
top:451px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
border: 0;
outline: none;
position: absolute;
left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
left: 72px;
position: absolute;
padding-left: 5px;
border: 0;
outline: none;
width: 153px;
color: black;
background-color: transparent;
}
Significant changes:
Your absolute positions were not right. Just correcting the positions positioned the inputs on top of the image.
Then you need to add border: 0 and outline: none to get rid of their borders.
Make sure that you also include the :focus and :active pseudoclasses because otherwise the borders will show up when the user starts typing.
Move the styles from your HTML to the CSS file. It's annoying to have inline styles.
Add a placeholder attribute to the text field. That way when the user starts typing, the placeholder text will disappear. If you keep the text in the image, user typed text will appear on top of the grey hint text.
Since you've also asked about the best way to solve this, let me answer that as well. If you can edit the image, just white out the area where the text field and the button are supposed to be and then use a pure CSS solution to render the them as you want. You can get the rounded corners using border-radius and use an image sprite for different states of the button.