Customize Your Form Labels with Bootstrap: Changing Label Color in Forms

I am completely new to using bootstrap, particularly bootstrap 3. The goal I have is to change the color of labels such as "Name", "Email Address", "Phone Number" and "Message" from dark grey to white in the design shown below.

https://i.sstatic.net/yDTto.png

Shown below is my HTML code:

<section class="success" id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact Me</h2>
                <hr class="star-light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
                <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
                <form name="sentMessage" id="contactForm" novalidate>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Name</label>
                            <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                            <p class="help-block text-default"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Email Address</label>
                            <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Phone Number</label>
                            <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div id="success"></div>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-success btn-lg">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

I currently possess a custom CSS file but lack the knowledge on how to specifically target and change the color of the labels "Name", "Email Address", "Phone Number" and "Message" to white instead of grey.

.floating-label-form-group {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #eeeeee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}
.floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease,opacity 0.3s ease;
  -moz-transition: top 0.3s ease,opacity 0.3s ease;
  -ms-transition: top 0.3s ease,opacity 0.3s ease;
  transition: top 0.3s ease,opacity 0.3s ease;
}
.floating-label-form-group:not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {
  color: #18BC9C;
 }

Any assistance or guidance on achieving this desired styling effect would be highly appreciated.

Thank you,

Answer №1

It's important to note that the label you saw was actually a placeholder for an input field.

To style the placeholder text using CSS, you can use the following code:

.floating-label-form-group textarea::-webkit-input-placeholder,
.floating-label-form-group  input::-webkit-input-placeholder { color: #fff; }
.floating-label-form-group textarea:-moz-placeholder ,
.floating-label-form-group  input:-moz-placeholder { /* Firefox 18- */ color: #fff; }
.floating-label-form-group  textarea::-moz-placeholder,
.floating-label-form-group  input::-moz-placeholder {  /* Firefox 19+ */ color: #fff; }
.floating-label-form-group  textarea:-ms-input-placeholder,
.floating-label-form-group  input:-ms-input-placeholder {   color: #fff; }

You can see this code in action on this working JSFiddle:https://jsfiddle.net/DTcHh/27294/

Answer №2

To change the label color to white, use the following CSS:

form label{
  color: #fff;
}

Check out the live demonstration on this fiddle.

Answer №3

To improve the visibility, update the color of the placeholder text currently being shown.

Check out the live example on JSFiddle: https://jsfiddle.net/DTcHh/27309/

In the CSS code snippet below:

 /*Adjusts the color of the placeholder text to white*/
.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }

If you prefer having a label, you can insert an h3 tag within the .control-group div and style it accordingly:

/*Modifies the appearance of the h3 tag above the placeholder text*/
.control-group h3 {
  color: #fff;
}

This implementation mirrors the outcome showcased in the provided fiddle, utilizing your initial code structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the background color of a Bootstrap dropdown when toggled

I recently created this code snippet: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdo ...

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

Is there a reason why the Chrome browser doesn't trigger a popstate event when using the back

JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...

Leveraging jQuery to implement onclick functionality within a Jinja2 loop

I'm currently working with Python, Flask, and Jinja2. When using a for loop, I want to be able to click on the {{ place.place_photo }} element to toggle its details. Initially, I had it functioning correctly but ran into an issue where clicking on on ...

Executing a function with a click, then undoing it with a second click

My goal is to trigger an animation that involves text sliding off the screen only when the burger icon is clicked, rather than loading immediately upon refreshing the page. The desired behavior includes activating the function on the initial click and then ...

Accurate understanding of URL parameters and hashtags

Imagine an HTML document containing two blocks, where the content of only one block can be displayed at a time by toggling between them using menu buttons and/or URL parameters with the same JavaScript functions provided below: <div class="block1&q ...

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally. Here is what I tried: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="span2"> <h2& ...

It appears that WebClient.DownloadString has a tendency to alter certain aspects of the HTML code retrieved from an external website

I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). ...

Combining Various Template Variables into a Single Variable in Django

I am facing a challenge in assigning multiple values from a dictionary to a variable within a Django template. For example: fruit.supplier = tesco fruit.color = blue {% with test=fruit.supplier_fruit.color %} {{ test }} {% endwith %} The expected ...

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

Tips for adjusting background-image position after page scale increase

I have a div block with the specified styles: .promo-blocks .first-appointment { background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz"); position: relative; background-c ...

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

Node.js and Express.js fails to transmit files to clients

Attempting to send a gif to the client for future use in CSS, but encountering a 404 error in the console log. The gif is located within the public directory. Server: var app = require('express')(); var http = require('http').Server(a ...