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>
Related
Checked a lot of solution (give margin etc) but still got stuck. I want to remove space between two textbox or any other thing which I add in future.
Also once I click in textbox it's border is automatically changing the color that shouldn't happen.
.rz-map-address{
border: 1px solid lightgray;
height: 60px;
width: 25%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rz-datetime{
border: 1px solid lightgray;
height: 60px;
width: 10%;
}
<html>
<body>
<input type="text" name="rz_geo" value="" placeholder="city, airport, adress or hotel " class="rz-map-address" autocomplete="off" />
<input type="text" name="rz_geo" value="" placeholder="Date" class="rz-datetime" autocomplete="off" />
</body>
</html>
You can resolve the first issue by joining both of the inputs on the same line.
For the last part, use input {outline: none}.
.rz-map-address {
border: 1px solid lightgray;
height: 60px;
width: 25%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rz-datetime {
border: 1px solid lightgray;
height: 60px;
width: 10%;
}
input {
outline: none;
}
<input type="text" name="rz_geo" value="" placeholder="city, airport, adress or hotel " class="rz-map-address" autocomplete="off" /><input type="text" name="rz_geo" value="" placeholder="Date" class="rz-datetime" autocomplete="off" />
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/
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 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 */