I want to design a form input with icon inside of it.
when I click on this form element(:focus) then that icon is getting disappear and I want icon to be visible all the times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,body {height: 100%;}
input {
width: 400px ;
height: 4em;
border: none ;
padding: 1em 0 1em 2em ;
color: black;
background: url('https://www.bluebadgeinsurance.com.au/wp-content/uploads/multi-user-icon.png') left center no-repeat ;
background-size: 30px 30px ;
}
</style>
</head>
<body>
<form name="myForm">
<input type="text" name="username" placeholder="username">
</form>
<script>
</script>
</body>
</html>
looks like its a problem with 'live server' from vs-code and without live server there is no problem.
Related
I am using Telerik to generate a textbox. Now I would like to equip this with an animation.
The problem is that Telerik wraps a span around the input, so I don't know how to change the hr element when the input is focused.
My Code:
span.inputanimation {
width: 100%;
}
// Here is what i dont know how to do !
span.inputanimation > .input > input:focus hr.underline {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr class="underline">
</span>
</body>
</html>
I removed some of the CSS classes and HTML Properties so it is better to look at.
My Telerik Code:
<span class="inputanimation">
<TelerikTextBox #bind-Value="Value"
Id="#Id"
PlaceHolder="#Label"
Class="input">
</TelerikTextBox>
<hr class="underline" >
</span>
Looking at various posts on hover and focus, it seems that the two elements have to be related, such as child or sibling. Which would be easy if you weren't using Telerik.
One solution is to use javascript. I am using ids to show the concept.
let search = document.getElementById('Vorname');
let ruler = document.getElementById('Ruler');
search.onfocus = function(){ ruler.style.width = '100%'; }
span.inputanimation {
width: 100%;
}
hr.underline {
width: 0%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id="Ruler" class="underline">
</span>
</body>
</html>
Another solution is to use focus-within
span.inputanimation {
width: 100%;
}
span.inputanimation:focus-within hr.underline {
width: 100%;;
}
hr.underline {
width: 10%;
transition: width 0.5s ease-in-out;
background-color: #17e13f;
height: 2px;
border: none;
margin-top: 2px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="styles.css" rel="stylesheet" type="text/css"></style>
</head>
<body>
<!-- Generated with TelerikTextBox -->
<span class="inputanimation">
<span class="input">
<input id="Vorname">
</span>
<hr id='Ruler' class="underline">
</span>
</body>
</html>
Current condition of site
I want to make sure that the choose file button should be positioned at the upload image position. I am new to HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="class">Upload Image</div>
<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>
</body>
</html>
You can put the "choose file button" inside the "upload image" div. You can then position them to achieve what you want. Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
<style type="text/css">
.class {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#myFile {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<form action="/action_page.php">
<div class="class">
Upload Image
<input type="file" id="myFile" name="filename">
</div>
<input type="submit">
</form>
</body>
</html>
Add the appropriate css attribute to the class fullscreen table-cell valign-middle text-centerwhich is having a input element.
body {
margin : 0px;
}
.fullscreen {
width : 100vw;
height : 100vh;
}
.table-cell {
display : table-cell;
border: 1px solid red;
position: relative;
width : 200px;
height :200px;
display:flex;
align-items: center;
}
.valign-middle {
vertical-align : middle;
}
.text-center {
text-align : center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health Buddy</title>
<link rel= "stylesheet" href="My_css.css">
</head>
<body>
<div class="TOP">HEALTH BUDDY</div>
<div class="fullscreen table-cell valign-middle text-center">
<input type="file" id="myFile" name="filename"></div>
<form action="/action_page.php">
<input type="submit">
</form>
</body>
</html>
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
css causes some red boxes that cannot be understood.
Chrome/80.0.3987.149 Linux x86_64
code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/b.css">
<style>
/* aaaaaaaaaa */
</style>
</head>
<body>
<style>
*:not(body):not(p) {
color: red;
font: 18px serif;
height: 100px;
width: 100px;
overflow: auto;
display: block;
border: 1px red solid;
}
</style>
</body>
</html>
demo:
https://stackblitz.com/edit/js-z6wf15?file=index.html
Is this a bug?
"special" doesn't have any defined meaning in HTML or CSS terms.
*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: