CODEWITHSUNDEEP
htmlcss
mister mcdoogle
mister mcdoogle

Reputation: 126

How Do I Make My Input Fields Black and Text to Blue

<form method="post" action="https://ip/form.php">
First name<br> <input type="text" name="fname" value=""><br>
Email Address:<br> <input type="text" name="email" value=""><br>
Phone: <br> <input type="text" name="phone" value=""><br><br>

<input type="hidden" name="formid" value="1">
<input type="submit" name="Sign up" value="Sign up">

</form>

My input fields are white. So is the text. User can't see their inputs. How do I change the input field to black and input text to blue? Also, how do I change the submit button to black.

Many thanks, sorry I don't know this stuff better yet.

Upvotes: 2

Views: 3139

Answers (5)

Wassim Al Ahmad
Wassim Al Ahmad

Reputation: 1094

try this on <style> tag you can change ( black , white ,blue ) to any other color

<style>
    .text{
        background-color: black;
        color: white;
    }
    body{
	    color:blue;
    }
</style>
<form method="post" action="https://ip/form.php">
    First name<br> <input class="text" type="text" name="fname" value=""><br>
    Email Address:<br> <input class="text" type="text" name="email" value=""><br>
    Phone: <br> <input class="text" type="text" name="phone" value=""><br><br>
    <input type="hidden" name="formid" value="1">
    <input type="submit" name="Sign up" value="Sign up">
</form>

Upvotes: 4

MTBthePRO
MTBthePRO

Reputation: 520

It is fairly simple to do. 

input[type=text] {
  background: black;
  color: blue;
}

This will only target the input fields with type set to 'text'. In the example below, We change the button background color and text color. 

input[type=text] {
  background: black;
  color: blue;
}

input[type=submit] {
  background: black;
  color: white;
}
<form method="post" action="https://ip/form.php">
First name<br> <input type="text" name="fname" value=""><br>
Email Address:<br> <input type="text" name="email" value=""><br>
Phone: <br> <input type="text" name="phone" value=""><br><br>

<input type="hidden" name="formid" value="1">
<input type="submit" name="Sign up" value="Sign up">

</form>

Hope this is what you were looking for :)

Upvotes: 1

Keilan Noonan Kessie
Keilan Noonan Kessie

Reputation: 35

Hey, before I answer this question I just want to point out that you really need to lay out your questions a bit better. I got my account practically banned a while ago because a load of jerks "weren't pleased by the layout". Just a heads up!

If you want to change the color of your input box add a style="color: [your color];" to your HTML tag, e.g:

<input type="text" style="background-color: [your color];">

you can use placeholder="[text]" and 

::-ms-input-placeholder {color: [your color];}

to change the color of the placeholder (the text in the box before the user begins to type) in your in input

And if you want to change the text color altogether use color like this:

<input type="text" style="color: [your color];">

easy :)

P.S I only got the privilege to post back today so sorry if the question isn't layed out top quality!

Upvotes: 2

Saptarshi
Saptarshi

Reputation: 148

A code snippet along with the description is always a better option. Anyway, you can use inline css.

<form>
  First name: <input type="text" name="fname" style="background-color: #000; color: blue;"><br>
  <input type="submit" value="Submit" style="background-color: black;">
</form>

Or else you can also use class or id attribute with tags and you can simply define styles inside tag. Like,

<style>
#fname{
   background-color: black;
   /*Other Styles*/
}
#sButton{
    background-color: black;
   /*Other Styles*/
}
</style>
<form action="/action_page.php">
  First name: <input type="text" id=''fname" name="fname"><br>
  <input type="submit" id="sButton" value="Submit">
</form>

Upvotes: 2

M00nR4bb1t
M00nR4bb1t

Reputation: 75

You have 0 context in your question, so just going by your tags... (Which are confusing too, by the way. What does styling your website have anything to do with vim?)

Use color: black; CSS for text color. background-color: blue; changes the background color. Optionally use border: none; to remove borders which may or may not be there by default depending on your browser.

Upvotes: 0

Related Questions