In the following code I try to make the border green when the user is typing in keyboard, but the following does not work
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type="text"]:hover {
border: 2px solid yellow;
}
input[type="text"]:focus {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>CSS Textbox</h2>
<input type="text" />
</body>
</html>
You can see the code here
https://codepen.io/jackee1234/pen/BaYjYKB
What's the right way to achieve that?
your code is fine the issue is when you select the text field there is a outline showing it is selected which covers the green border to fix this just add outline: none; to your input box style i.e.
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
outline: none; //added here
}
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div><!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
outline: none; //added here
}
input[type="text"]:hover {
border: 2px solid yellow;
}
input[type="text"]:focus {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>CSS Textbox</h2>
<input type="text" />
</body>
</html>
Just add outline property and give it a none value to the input focus like this,
input[type="text"]:focus {
border: 2px solid green;
outline:none; //outline causing this issue.
}
just add the following:
input[type="text"]:focus-visible {
outline: none;
}
Related
I am new working with HTML/CSS/JS and SvelteKit, so I'm struggling getting the look how I want it.
HTML
<h1>{market}</h1>
{#each articleList as item}
<form action="" method="post">
<p class="{item.checked ? "item-checked" : ""}">
{item.quantity} {item.article} {item.place}
</p>
{#if item.checked}
<button>DELETE</button>
{/if}
</form>
{/each}
Global CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: #3A3A3A;
font-family: 'Montserrat', sans-serif;
margin: 0 2em;
}
Component CSS
form {
border: 1px solid #57FF90;
border-radius: 4px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
}
form p {
color: #FFFFFF;
font-size: 1.4rem;
padding: 0 0.5em
}
.item-checked {
text-decoration: line-through;
}
button {
height: 50px;
border: none;
background-color: #57FF90;
margin: 0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
As you can see on the screenshot, there is a gap on the right side.
I created a test HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<form action="POST">
<p>Random Text</p>
<button>DELETE</button>
</form>
<form action="POST">
<p>Random Text</p>
<!-- <button>DELETE</button> -->
</form>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1em;
}
form {
background-color: red;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
border-radius: 4px;
}
button {
border: none;
background-color: green;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
</style>
</body>
</html>
Here everything is looking like expected. Why is there a difference?
Your html test file isn't using the same CSS. When I edit the styles in the test file to be the same as those you're using in the svelte code, I get a page that looks identical.
Also, I don't see the gap except at 175% zoom. That's kind of odd, so I suspect that it's a rounding issue. At any rate, it appears in the html test file as well as the served svelte file, so this isn't a Svelte or SvelteKit issue, as near as I can tell.
I am trying to determine how to change the border on an textbox in a sidebar. if I used the div ID (myDiv) it seems to work. When I use the text ID (toggleit) it is not working. Here is the code.
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<style>
.error {
width: 125px;
display: inline-block;
border: 2px solid red;
border-radius: 5px;
background-color: #f8f8f8;
}
.myStyle {
width: 125px;
display: inline-block;
border: 2px solid green;
border-radius: 5px;
background-color: #f8f8f8;
}
</style>
<body>
<div >
<div id="myDiv">
<input type="text" class="myStyle" id="toggleit" name="toggleit" placeholder="toggle to red"><br>
</div>
<button onclick="toggleTest()">toggle</button>
</div>
</body>
<script>
function toggleTest() {
document.getElementById("toggleit").classList.toggle("error");
}
</script>
</html>
you need to remove or toggle the myStyle class too.
function toggleTest() {
document.getElementById("toggleit").classList.toggle("error");
document.getElementById("toggleit").classList.toggle("myStyle");
}
.error {
width: 125px;
display: inline-block;
border: 2px solid red;
border-radius: 5px;
background-color: #f8f8f8;
}
.myStyle {
width: 125px;
display: inline-block;
border: 2px solid green;
border-radius: 5px;
background-color: #f8f8f8;
}
<body>
<div >
<div id="myDiv">
<input type="text" class="myStyle" id="toggleit" name="toggleit" placeholder="toggle to red"><br>
</div>
<button onclick="toggleTest()">toggle</button>
</div>
</body>
I'm trying to make a comment box that is horizontal with the name box, because the text box was fixed on the top. When I tried to apply margin-top on the text area and form, it moves the name box and the whole entire profile down with it. Is there a way to move the text area down, without affecting anything else. Here is my code:
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label for="fname">Profile Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
label{
position:relative;
top:50px;
right:100px;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label class="label-prueba" for="fname"> Profile <br> Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
I have seen your code and found your problem, my suggestion is kindly add two property to your .textarea class and that is position:relative and top as per your requirement.
textarea{
position:relative;
top:100px;
}
try margin-top with a negative value, for instance: margin-top: -2px;
My css class is not applying the style yet I have imported the css file. What might be the issue?
Here is the code:
.edubtn{
background-color: #862165;
border: 0;
padding: 2 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
<div class="edubtn" onclick="show()" >ORDER</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (#media screen) brackets
#media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
your code works fine,
the background color is dark purple which is = to saying background-color: #862165;
the text color is white which is = to saying color: rgba(255,255,255,0.7);
I run your code and I did a <h2> with the same style and it works
HTML Code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beep-Boop</title>
</head>
<body>
<h2 class="something"> Something..</h2>
<div class="edubtn" onclick="show()" >ORDER</div>
</body>
Style CSS :
.something{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.something:hover{
color: #fff;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
I have been hustling with this for couple of days, and I can't seem to figure out a good way to add a tool tip to the background url, I have two images in background, far left is a user icon and far right is help icon. I am looking forward to add a tooltip or title on mouse hover over only to the tooltip.png icon which is located to the far right.
can anyone suggest a better way to implement this.
following is the code
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat, url('http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png') right 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</form>
</body>
</html>
any help is much appreciated, thank you
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
z-index:-1;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
img{
position:absolute;
right:15px;
top:20px;
}
#username{
position:relative;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
right:15px;
z-index: 1;
}
img:hover + .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<div id="username">
<img src="http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png" width=20px; height=20px;>
<span class="tooltiptext">You have to enter username</span>
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</div>
</form>
</body>
</html>
Here is a link that may help you out with this.
http://www.w3schools.com/css/css_tooltip.asp