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/
Related
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>
So I have these black boxes go round the input area on the form I am building. Is there a way I can remove this, I am also using bootstrap not sure if that is affecting it but if there is any ideas. Greatly appreciated!
.form-input-styling {
border-radius: 0 2em;
padding: 0 10px;
width: 50%;
border: none;
line-height: 2em;
margin-bottom: 20px;
background-color: #f25b43;
}
<div class="row">
<div class="col-12"><input class="form-input form-input-styling" type="text" id="fname" name="fname" required placeholder="Name"></div>
<div class="col-12"><input class="form-input form-input-styling" type="email" id="email" name="email" required placeholder="Email"></div>
<div class="col-12"><input class="form-input form-input-styling" type="tel" id="phone_num" name="phone_num" placeholder="Phone Number"></div>
<div class="col-12"><textarea id="text-area" name="textarea" rows="4" cols="50" placeholder="Enter Your Message Here"></textarea></div>
<div class="col-12"><input type="submit" value="Submit"></div>
</div>
Add outline: none; to your css for the input element.
.form-input-styling {
border-radius: 0 2em;
padding: 0 10px;
width: 50%;
border: none;
outline: none;
line-height: 2em;
margin-bottom: 20px;
background-color: #f25b43;
}
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>
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;
}
I'm trying to make the border gray, and for some reason only 2 "edges" / half of the box of the
<input type="text"> are gray while the <textarea> border is fine.
Any idea why is this happening? both have the same class .fill-form-style
.fill-form-font {
padding: 8px;
border-radius: 20px;
border-color: gray;
outline: none;
font-size: 16px;
}
And this is the HTML of the input and textarea:
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
Use border-style:solid; This will stop the border from being the two different colours.
JSFiddle
Thanks to some messing around (and Paulie_D in comments [Thanks!]) I found out it's because of the inset border style.
You can also use shorthand border which then means you have less lines in your css.
border:1px solid #f00;
Here's a working snippet:
.fill-form-font{
padding: 8px;
border-radius: 20px;
border-color: red;
border-style:solid;
outline: none;
font-size: 16px;
}
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font" >
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
That's because of User Agent Style. You need to use border to override the user agent border. Example:
.fill-form-font {
padding: 8px;
border-radius: 20px;
border: 1px solid gray;
outline: none;
font-size: 16px;
}
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">
<textarea name="content" cols="60" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
Solution...
.fill-form-font{
padding: 8px;
border-radius: 20px;
border: 1px solid gray;
outline: none;
font-size: 16px;
}
https://jsfiddle.net/ew2orox0/ live example
By default, browser users border-style: inset; and you should change it to use border-style: solid.
You could just add that property or use the border definition in just one line:
border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */