I want to place different textareas on different pages. The CSS for the textarea seems to be overriding the rows and cols I try to set for the second textarea. I've tried "textarea" and "textarea1", but that obviously didn't work.
textarea {
width: 40%;
height: 75px;
padding: 12px 20px ;
box-sizing: border-box;
border: 5px solid #D8FF01;
border-radius: 4px;
background-color: #000;
color: white;
font-weight: bolder;
resize: both;
}
<form>
<textarea name="comment" placeholder="Enter text here"></textarea>
</form>
<form>
<textarea name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>
you can use like this
textarea:not(.reason) {
width: 40%;
height: 75px;
padding: 12px 20px ;
box-sizing: border-box;
border: 5px solid #D8FF01;
border-radius: 4px;
background-color: #000;
color: white;
font-weight:bolder;
resize:both;
}
<form>
<textarea name="comment" placeholder="Enter text here"></textarea>
</form>
<form>
<textarea name="reason" class="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>
in this way, CSS selector uses class of element.
or
textarea.myTextBox {
width: 40%;
height: 75px;
padding: 12px 20px;
box-sizing: border-box;
border: 5px solid #D8FF01;
border-radius: 4px;
background-color: #000;
color: white;
font-weight: bolder;
resize: both;
}
<form>
<textarea name="comment" class="myTextBox" placeholder="Enter text here"></textarea>
</form>
<form>
<textarea name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>
Your code should be like this
HTML:
<form>
<textarea class="textarea1" name="comment" placeholder="Enter text here">
</textarea>
</form>
<form>
<textarea class="textarea2" name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>
CSS:
.textarea1 {
width: 40%;
height: 75px;
padding: 12px 20px ;
box-sizing: border-box;
border: 5px solid #D8FF01;
border-radius: 4px;
background-color: #000;
color: white;
font-weight:bolder;
resize:both;
}
.textarea2 {
width: 40%;
height: 75px;
padding: 12px 20px ;
box-sizing: border-box;
border: 5px solid #D8FF01;
border-radius: 4px;
background-color: #000;
color: white;
font-weight:bolder;
resize:both;
}
try to just do a separate css for both by using class so:
<form>
<textarea class="xxx" name="comment" placeholder="Enter text here">
</textarea>
</form>
<form>
<textarea class="yyy" name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50">
</textarea>
</form>
CSS:
.xxx {
enter styling code here
}
.yyy {
enter styling code here
}
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>
I have tryied everything to make my contact form in the centre and tidy it up a bit, because I was Name, Email Address and Age on the same line. I want Subject and drop down select on the second line and lastly i have tried to get the text area on the last line. I got the contact for of w3schools. I have tried searching the web and youtube for the answer, but nothing has worked.
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<div class="container">
<form action="/action_page.php">
<input type="text" id="name" name="name" placeholder="Name">
<input type="email" id="email" name="email" placeholder="Email Address">
<input type="number" id="age" name="age" placeholder="Age">
<input type="text" id="subject" name="subject" placeholder="Subject">
<select type="dropdown" name="contact" placeholder="Age">
<option placeholder="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
My form
This is the way i am trying to get my form
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width:80%;
max-width:800px;
margin:0 auto;
}
.flex-row{
display:flex;
justify-content:space-between;
align-content:center;
align-items:strech;
line-height:45px;
}
.flex-row input,
.flex-row textarea,
.flex-row select{
margin:5px;
}
input[type=submit]{
margin:5px auto;
display:block;
}
.flex-row input:nth-child(3){
flex-basis:150px;
}
<div class="container">
<form action="/action_page.php">
<div class="flex-row">
<input type="text" id="name" name="name" placeholder="Name">
<input type="email" id="email" name="email" placeholder="Email Address">
<input type="number" id="age" name="age" placeholder="Age">
</div>
<div class="flex-row">
<input type="text" id="subject" name="subject" placeholder="Subject">
<select type="dropdown" name="contact" placeholder="Age">
<option placeholder="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
<div class="flex-row">
<textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
</div>
<input type="submit" value="Submit">
</form>
</div>
Give with to your container and center it with margin: auto See my code.
Ho sorry, here you can find what you need..
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;
}
For some reason I cannot get the submit button to center. I have tried everything from text-align: center; to margin: 0 auto; to a left and right margin at auto. The button will not center anyway I try. What am I failing to do?
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
It's hard to center is, because it is inside a label. The label is an inline element too and will size around the button. Therefor text-align: center and other solutions don't work.
In the snippet below, I've made the label show itself as a block element, which automatically occupies the available width of the parent. Then you can easily center the button inside it:
The added piece:
label[for="contactButton"] {
display: block;
text-align: center;
}
The whole code:
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
/* Make sure the button isn't too wide on small screens */
max-width: 80%;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
label[for="contactButton"] {
display: block;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
Use text-align:center on the parent div.
Fiddle: http://jsfiddle.net/gopal/su3vg018/
.contactForm {
text-align:center;
}
Add this to your css file:
.contactForm label[for="contactButton"] {
display: block;
text-align: center;
}