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 */
Related
So I have these two text areas for a Morse Code translator that are in a form tag. One text area is in its default position, and the other is supposed to sit at the border of the other side of the space.
I have accomplished this with this code:
#output {
position:relative;
right:-16.15px;
}
.textbox {
font-size: .8rem;
letter-spacing:1px;
font-family: Palatino Linotype;
padding:10px;
line-height:1.5;
border: 1px solid #444;
border-radius: 5px;
box-shadow:1.25px 1.25px 1.25px #777;
resize: none;
outline: none;
background-color:#222;
color:white;
}
<form class="boxparent" method="post">
<textarea class="textbox" id="input" rows="10" cols="80" placeholder="Enter text here"> </textarea>
<textarea readonly class="textbox" id="output" rows="10" cols="80"></textarea>
</form>
How can I position this text area so that it's responsive and won't look wonky if the browser window is not 1920x1080?
I also have this button that I don't know how to make responsive:
#switch {
position: absolute;
right:21.5rem;
border-radius:20px;
padding:7px;
background-color:#444;
color:#eee;
border:1px solid #888;
}
<button id="switch" href="morse.html">Translate to English</button>
This is how the page currently looks (the #de44e6 background was supposed to help with aligning the text areas):
Can anyone suggest how I can position these elements so they are responsive to the browser window?
thanks in advance
display:flex; and flex-wrap:wrap works;
.boxparent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.textbox {
font-size: 0.8rem;
letter-spacing: 1px;
font-family: Palatino Linotype;
padding: 10px;
line-height: 1.5;
border: 1px solid #444;
border-radius: 5px;
box-shadow: 1.25px 1.25px 1.25px #777;
resize: none;
outline: none;
background-color: #222;
color: white;
}
<form class="boxparent" method="post">
<textarea
class="textbox"
id="input"
rows="10"
cols="80"
placeholder="Enter text here"
>
</textarea>
<textarea
readonly
class="textbox"
id="output"
rows="10"
cols="80"
></textarea>
</form>
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 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
}