I am making a simple forms in html. The background is black so I want the typing text in white.
Here is what I have so far:
<form method="GET">
<input type="text" name="name" placeholder="Full Name"><br/>
<input type="submit">
</form>
I highlight the typing text in the picture "asdasd" I want the user can type their text in color white. I've tried color: #ffffff; in CSS, but it does not works.
Any help would appreciated.
You should be able to fix this by doing this:
<input type="text" name="name" placeholder="Full Name" style="color:white;">
For a neater look, you could also do this:
<input type="text" name="name" placeholder="Full Name">
input {
color:white;
}
Or, if you only want to apply the white text to one input, you could do this:
<input type="text" name="name" placeholder="Full Name" id="input1">
#input1 {
color:white;
}
If you want to make the placeholder the same color, or a similar color, use the solution by #Çağrı.
In css u should change both color of input and placeholder of input to white.
input[type=text],input[type=text]::placeholder{
color:white;
}
Try something like this?
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Related
I am trying to put an effect on this email input so that when it is clicked on, it has a red border, but it has a problem where a white border also appears as well, and I want to remove this.
the code is:
<form action="#">
<input type="email" name="email" required placeholder="Your Email"/>
<input type="submit" name="submit" value="Subscribe"/>
</form>
[type="email"]{
padding:.7rem;
border-radius:.3rem;
border:none;
margin-right:2rem;
&:focus{
border:4px solid red;
}
}
I want to apply some css styling on my labels for my web page but have no idea how to make it work. At first, I thought I could type
label{text-align: center} but it's not giving my any styling at all. What should I type to style my labels? This is my code:
<label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" required>
Thanks in advance everyone!
Ok, text-align:center didn't work because basically the label elements are inline
inline elements are elements who their display is set to inline , explicitly or by default
these elements won't accept any width or height and only get ENOUGH width and height for their content
they even don't accept vertical margins...
so your label here is as small as it's content and there is no room to change your text's alignment...
you can change it's display to make it's text centered
Here You can see what I said, I've added another label and changed it's display and colored the labels so you can see diffrence
<style>
label{
background: khaki;
}
.lname{
display:block;
text-align:center;
}
.test{
display: block;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label class="lname" for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label class="test" for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>
I think what you want is the middle one
========%%%%=======%%%%=========
Ok Based On Your comment and image
it's not label who you want to center, it's your input
<style>
input{
display:block;
text-align:center;
width: 100%;
}
input::placeholder{
text-align: center;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
input {
width: 100%;
text-align: center;
}
<input type="text">
For example the text that user writes as his email in an input. Is there anyway at all?
this is a simple example :
input[type=email]:focus {
background-color: lightblue;
}
<label for="email">Enter your email:</label>
<input type="email" id="email"
pattern=".+#globex.com" size="30" required>
You can style the content of the input box like any other HTML element:
input{
color:teal;
font: 20px Arial, sans-serif;
}
Another thing you can add is the placeholder attribute like this:
<input type="text" class="mytext" placeholder='Thats some really nice placeholder!' />
Here is what I currently have:
<script>
function colour(x){
document.getElementById(x).style.border = "1px green solid";
}
</script>
<p>Email<span style="color:red">*</span><input type="email" name="email" autofocus required/></p>
<p>Name<span style="color:red">*</span><input type="text" id="fname" name="fname" placeholder="First Name" required onfocus="colour(this.id)"/><span style="color:red">*</span><input type="text" id="lname" name="lname" placeholder="Last Name" required onfocus="colour(this.d)"/></p>
No matter what I do it will focus on the email, can I fix it?
You could fix it, with CSS. Just write some CSS like this.
input:focus {
border:1px solid green;
}
And your input fields are green bordered if they are in Focus. No Need for JavaScript in this case.
You can fix it without JavaScript you have to use border along with outline.
The outline property will disable the browser focus color.
input:focus {
outline: none;
border: 1px solid green;
}
no matter what i do, it focuses on the email
If you want to focus another input field, remove the autofocus property from your email field and add it to the field you want to focus at page load. If you don't want that a field is focused at page load, just remove the autofocus attribute.
I just want to know how to change the color of placeholder text in my html page.
I used
::-webkit-input-placeholder { color:red; }
It works, but changed the placeholder text colors in my whole page. So let me know if there is any way which we can specify the placeholders or input in html, so that we can change the place holder text color of desired area only.
try this code
.fname::-webkit-input-placeholder {
color: red
}
<div class="content">
<input type="text" name="firstname" class="fname" placeholder="placeholder">
</div>
<input type="text" name="lastname" class="lname" placeholder="placeholder">
or may be can use
.content ::-webkit-input-placeholder {
color: red
}
It will change placeholders only for Chrome. To get individual styles try this CSS instead:
.changed::-webkit-input-placeholder{
color: red;
}
.changed::-moz-placeholder {
color: red;
}
.changed:-ms-input-placeholder {
color: red;
}
<input type="text" class="changed" placeholder="Changed placeholder">
<input type="text" class="original" placeholder="Original placeholder">