This is the image which shows my problem >> https://imgur.com/a/YpvMAYq << Here's my html code:
.form-control {
width: 600px;
fill: none;
background: transparent;
border: none;
border-bottom: 1px solid grey;
font-size: 18px;
margin-bottom: 16px;
}
<form id="contactForm" method="POST" action="">
<input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
<br>
<input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
<br>
</form>
Thank you for reading this ;)
As I mentioned in a comment, it looks like a background is being set when the input is in a certain state. It looks like your using a framework and it is impossible to tell without the code used there, or a codepen/jsfiddle.
The css below will set the background to transparent when the input is in focus or active states.
.form-control:focus, .form-control:active {
background: transparent;
}
Check out this question for information on input states.
In css code instead you can add
background-color:transparent;
Try this
form{
background: #000;
}
.form-control {
width: 600px;
fill: none;
background: transparent;
border: none;
border-bottom: 1px solid gray;
font-size: 18px;
margin-bottom: 16px;
}
input:focus {
background-color: #fff;
border: 2px solid #000;
padding: 20px;
border-radius: 10px;
}
<form id="contactForm" method="POST" action="">
<input name="fName" type="text" class="form-control" placeholder="What should I call you? Person X?" required>
<br>
<input name="email" type="email" class="form-control" placeholder="Only, if you want to be emailed back">
<br>
</form>
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 7 months ago.
I have been struggling to get rid of this line when I click on a specific input. Here is an example:
HTML:
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input name="name" type="name" placeholder="Name" required />
<input name="name" type="surname" placeholder="Surname" required />
</div>
<input name="email" type="email" placeholder="Email" required />
<textarea
name = "message"
type="message"
placeholder="Message"
row="4"
required
></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
CSS:
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
form input:focus {
border: none;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
padding: 10px;
}
I'm just looking for a solution that will help me to get rid of the black border when the input is focused on. This Black border doesn't appear when an input is not focused on.
Thanks in advance for the help.
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
form input:focus {
border: none;
outline: none;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
padding: 10px;
outline: none;
}
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input name="name" type="name" placeholder="Name" required />
<input name="name" type="surname" placeholder="Surname" required />
</div>
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" type="message" placeholder="Message" row="4" required></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
It is outline.
Just use outline:none.
form input:focus {
border: none;
outline:none;
}
textarea {
outline:none;
}
Here, I am trying to change the background color of the input after I write something in the textbox. Whenever I focus, then it will change the background color to white and it will remain white for the rest of time.
<input type="text" class="
.contact-form input,
.contact-form textarea {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
}
.contact-form input:focus {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
background-color: white;
border: 2px solid;
border-color: #207398;
}
<input type="text" class="nameZone" name="name" placeholder="Your Full Name" style="color: black;">
<input type="email" class="emailZone" name="email" placeholder="Your Email" style="color: black;">
<input type="text" class="subjectZone" name="subject" placeholder="Subject" style="color: black;">
<textarea class="messageZone" name="message" placeholder="Message" style="color: black;"></textarea>
Remark: The top part of code is broken?
However, I've assumed you want to kept the gray-ish background while typing in data. I think you could use !important. The :focus part shall be redundant.
.contact-form input, .contact-form textarea {
background-color: #353b48 !important;
}
Snippet is the part of updated code. Btw, your inline css color:black has overrule the internal css color:white.
.contact-form input, .contact-form textarea {
width: 100%;
height: 50px;
margin: 10px 0;
background-color: #353b48 !important;
border: none;
outline: none;
padding: 20px;
border-radius: 4px;
color: #fff;
}
<div class="contact-form">
<input type="text" class="nameZone contact-form" name="name" placeholder="Your Full Name" style="color: black;">
<textarea class="messageZone" name="message" placeholder="Message" style="color: black;"></textarea>
</div>
How Can I delete the black border when clicking on any input??
Here is my HTML
<div class="info">
<input class="forms" type="text" placeholder="First Name.">
<input class="forms" type="email" placeholder="Email Adress.">
<input class="forms" type="tel" placeholder="Phone Number (optional)">
<input id="submitbtn" type="button" value="SUBMIT MESSAGE">
</div>
AND here is css
.forms {
margin-bottom: 30px;
font-size: 20px;
color: blue;
padding: 0px;
padding-bottom: 14px;
width: 440px;
border: none;
background-color: transparent;
border-bottom: 4px solid black;
}
.forms::placeholder {
color: rgba(0, 41, 255, 0.42);
}
Add the following code you your CSS and your problem will be solved
input:focus{
outline: none;
}
It's important to note that disabling an input element's outline is not recommended as it hinders accessibility. The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further go through this link http://outlinenone.com/
Hot to change standard input fields to an image?
<input class="FeedBack" type="text" placeholder="Full name"><br>
<input class="FeedBack" type="email" placeholder="mail#mail.ru"><br>
<textarea class="FeedBack" cols="30" rows="10"></textarea><br>
https://jsfiddle.net/5fnvt1mu/
I want to use this image instead of standart input field
https://ibb.co/3dwx295
You would need to use CSS to style the input field.
.FeedBack {
border-radius: 10px;
width: 450px;
padding: 20px 10px;
border: 1px solid lightblue; /*change to whatever colour you want */
color: lightgray; /*change to whatever colour you want */
}
This one looks to be:
.FeedBack {
border-radius: 10px;
width: 450px;
padding: 20px 10px;
border: 1px solid lightblue; /*change to whatever colour you want */
color: lightgray; /*change to whatever colour you want */
}
<input class="FeedBack" type="text" placeholder="Full name"><br>
<input class="FeedBack" type="email" placeholder="mail#mail.ru"><br>
<textarea class="FeedBack" cols="30" rows="10"></textarea><br>
I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.
.log_inp input[type="username"] {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to only move the placeholders over, use vendor prefix CSS properties:
::-webkit-input-placeholder {
padding-left: 10px;
}
::-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to change the padding and not have it influence the total size of the input, set box-sizing to border-box.
In the following example, the two inputs are the same size, but I have given the username one a left padding.
.log_inp input {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding: 0px;
box-sizing: border-box;
}
input[type="username"] {
padding-left:10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
.log_inp input[type="username"] {
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding-left:10px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
With accepted answer cursor position of input is not modified.
You can move placeholder text of your input along with its cursor position via
input {
text-indent: 10px;
}
https://www.w3schools.com/csSref/pr_text_text-indent.asp
Check it out it might be helps u
input{
text-align:center;
}