HTML更改表单元素的颜色

时间:2015-07-29 18:14:20

标签: html css

所以我试图让选择表单中的文字有颜色这样的例子,你写你的名字发送电子邮件我希望文本是一个黑色的颜色示例,也在选择表格内我尝试使用div但未能让它工作。我尝试将它放在css中也将它链接到div也没有

work.
#skills  {
color:F0F8FF;
}


<form name="enq" method="post" action="email/" onsubmit="return validation();">
    <fieldset class="contact-inner">
      <p class="contact-input">
        <input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus>
        <input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus>
        <input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus>
      </p>

      <div id="skills">
      <p class="contact-input">
        <label for="select" class="select">
          <select name="why" id="why">      
            <option value="" selected>Skills</option>
            <option value="3D Printing">3D Printing</option>
            <option value="Alternative Healers">Alternative Healers</option>
            <option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
            <option value="Architecture/Design">Architecture/Design</option>
            <option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
            <option value="Construction">Construction</option>
            <option value="Culinary Arts">Culinary Arts</option>
            <option value="Electrician">Electrician</option>
            <option value="EM Technology">EM Technology</option>
            <option value="Free Energy/QEG">Free Energy/QEG</option>
            <option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
            <option value="Hemp Farming">Hemp Farming</option>
            <option value="Hempcrete">Hempcrete</option>
            <option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
            <option value="Landscaping">Landscaping</option>
            <option value="Massage Therapist">Massage Therapist</option>
            <option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
            <option value="Permaculture">Permaculture</option>
            <option value="Recycling">Recycling</option>
            <option value="Sewing">Sewing</option>
            <option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
            <option value="Technology">Technology</option>
            <option value="Other">Other</option>
            <option value="All">All</option>
            <option value="None">None</option>
            </div>

          </select>
          <label for="select" class="select">
          <select name="participate" id="participate">
            <option value="" selected>When can you participate?</option>
            <option value="3-6 months from now">3-6 months from now</option>
            <option value="6-12 months">6-12 months</option>
            <option value="Next Year (2016)">Next Year (2016)</option>
            <option value="Don't know yet">Don't know yet</option>
          </select>
        </label>
      </p>

      <p class="contact-input">
        <textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
      </p>

      <p class="contact-submit">
        <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
      </p>
    </fieldset>
  </form>

2 个答案:

答案 0 :(得分:0)

尝试使用:

-input-placeholder

这是你想要的吗?

&#13;
&#13;
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #000;
}
&#13;
<form name="enq" method="post" action="email/" onsubmit="return validation();">
    <fieldset class="contact-inner">
         <p class="contact-input">
          <input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus />
            <input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus />
            <input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus />
            </p>
      <div id="skills">
      
          <label for="select" class="select"></label>
          <select name="why" id="why">      
            <option value="" selected>Skills</option>
            <option value="3D Printing">3D Printing</option>
            <option value="Alternative Healers">Alternative Healers</option>
            <option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
            <option value="Architecture/Design">Architecture/Design</option>
            <option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
            <option value="Construction">Construction</option>
            <option value="Culinary Arts">Culinary Arts</option>
            <option value="Electrician">Electrician</option>
            <option value="EM Technology">EM Technology</option>
            <option value="Free Energy/QEG">Free Energy/QEG</option>
            <option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
            <option value="Hemp Farming">Hemp Farming</option>
            <option value="Hempcrete">Hempcrete</option>
            <option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
            <option value="Landscaping">Landscaping</option>
            <option value="Massage Therapist">Massage Therapist</option>
            <option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
            <option value="Permaculture">Permaculture</option>
            <option value="Recycling">Recycling</option>
            <option value="Sewing">Sewing</option>
            <option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
            <option value="Technology">Technology</option>
            <option value="Other">Other</option>
            <option value="All">All</option>
            <option value="None">None</option>

          </select>
          <label for="select" class="select"></label>
          <select name="participate" id="participate">
            <option value="" selected>When can you participate?</option>
            <option value="3-6 months from now">3-6 months from now</option>
            <option value="6-12 months">6-12 months</option>
            <option value="Next Year (2016)">Next Year (2016)</option>
            <option value="Don't know yet">Don't know yet</option>
          </select>
         </div>
          </p>

      <p class="contact-input">
        <textarea rows="11" name="message" id="message" placeholder="Your Message…"></textarea>
      </p>

      <p class="contact-submit">
        <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
      </p>
    </fieldset>
  </form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这样的事情?

&#13;
&#13;
#email {
    color:blue; /*target element with id email and set text color to blue*/
}
#name {
    color: red; /*target element with id name and set text color to red*/
}
#skype {
    color: green; /*target element with id skype and set text color to green*/
}
#why {
    color: orange; /*target element with id why and set text color to orange. in this case, its a select, so all the text within the select - meaning the options text- is orange*/
}
#participate .yellow {
    color: yellow;    /*target elements with class yellow (options) inside element id participate (select)  and set text color to yellow. in this case, you can select which options to make yellow by adding classes*/
}
#message {
    color: purple; /*target element with id message and set text color to purple*/
}
&#13;
<form name="enq" method="post" action="email/" onsubmit="return validation();">
  <fieldset class="contact-inner">
    <p class="contact-input">
      <input type="text" id="email" value="aaaa" name="email" placeholder="Your Email..." autofocus>
      <input type="text" id="name" value="bbbbb" name="name" placeholder="Your Full Name." autofocus>
      <input type="text" id="skype" value="cccc" name="skype" placeholder="Your Skype Name." autofocus>
    </p>

    <div id="skills">
      <p class="contact-input">
        <label for="select" class="select">
          <select name="why" id="why">      
            <option value="" selected>Skills</option>
            <option value="3D Printing">3D Printing</option>
            <option value="Alternative Healers">Alternative Healers</option>
            <option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
            <option value="Architecture/Design">Architecture/Design</option>
            <option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
            <option value="Construction">Construction</option>
            <option value="Culinary Arts">Culinary Arts</option>
            <option value="Electrician">Electrician</option>
            <option value="EM Technology">EM Technology</option>
            <option value="Free Energy/QEG">Free Energy/QEG</option>
            <option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
            <option value="Hemp Farming">Hemp Farming</option>
            <option value="Hempcrete">Hempcrete</option>
            <option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
            <option value="Landscaping">Landscaping</option>
            <option value="Massage Therapist">Massage Therapist</option>
            <option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
            <option value="Permaculture">Permaculture</option>
            <option value="Recycling">Recycling</option>
            <option value="Sewing">Sewing</option>
            <option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
            <option value="Technology">Technology</option>
            <option value="Other">Other</option>
            <option value="All">All</option>
            <option value="None">None</option>


          </select>
          <label for="select" class="select">
            <select name="participate" id="participate">
              <option value="" selected>When can you participate?</option>
              <option value="3-6 months from now">3-6 months from now</option>
              <option class="yellow" value="6-12 months">6-12 months</option>
              <option value="Next Year (2016)">Next Year (2016)</option>
              <option class="yellow" value="Don't know yet">Don't know yet</option>
            </select>
          </label>
        </label>
      </p>
    </div>
    <p class="contact-input">
      <textarea rows="11" name="message" id="message" placeholder="Your Message…">ddddd</textarea>
    </p>

    <p class="contact-submit">
      <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
    </p>
  </fieldset>
</form>
&#13;
&#13;
&#13;