css for floating labels in input and textarea using bootstrap

I have implemented the Bootstrap Float-label feature found at https://github.com/tonystar/float-label-css

Note: I made some custom changes to suit my needs.

Issues :

1) While clicking on an input, the float label functions correctly. However, the bootstrap form input border is visible within the float label background.

https://i.sstatic.net/701zK.jpg

2) Upon validation, the float label for the next input gets disrupted, causing it to overlap with the input field. I placed the error message 

<span id="error_*****" class="error"></span>
outside 
<span class="has-float-label">

https://i.sstatic.net/NQbJU.jpg

3) Differences in appearance across various browsers are noted below. In IE and Edge, float labels apply by default. Is this acceptable or are there any specific solutions for IE and Edge?

https://i.sstatic.net/8lwDR.jpg

Additional Information relevant to my scenario:

Operating System: Windows 10 64-bit
Browsers Tested: Firefox (Version 72.0.1), Chrome (Version 79.0.3945.117), Opera (Version 65.0.3467.78), MS-Edge (Version 44.18362.449.0), MS-IE (Version 11.535.18362.0)
Bootstrap Version Utilized: 4.4.1

// JavaScript function
function trim(stringToTrim) {
  return stringToTrim.replace(/^\s+|\s+$/g,"");
}
$(document).ready(function() {
  $("#btn_contactus").click(function() {
    // Validation script here
  });
});
// CSS styles for float labels
.instruction {
// Instructions styling
}
.required {
// Required fields styling
}
.error {
// Error messages styling
}
.has-float-label{
// Float label container
}
...
.insert remaining CSS code snippets...
// External libraries and resources
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
...
.insert remaining HTML and CSS code snippets...

htmlcsstwitter-bootstrapbootstrap-4label

Answer №1

Resolution 1: Update the background-color of the float label

Resolution 2: Delete the input-group to display error message below the floating label (it is recommended to show messages below input field, not above)

Resolution 3: For further assistance, please refer to this helpful link: Link

function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g,"");
}
$(document).ready(function() {
$("#btn_contactus").click(function () {
//alert("hi");return false;
if ( trim($("#firstname").val()) == '' )
{
$("#error_firstname").html('Please enter First Name');
$("#error_firstname").show();
$("#firstname").val('').focus();
return false;
}
else
{
$("#error_firstname").hide();
}
if ( trim($("#lastname").val()) == '' )
{
$("#error_lastname").html('Please enter Last Name');
$("#error_lastname").show();
$("#lastname").val('').focus();
return false;
}
else
{
$("#error_lastname").hide();
}
var emailfilter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if ( !emailfilter.test(trim($("#emailid").val())) )
{
$("#error_emailid").html('Please enter Valid Email ID');
$("#error_emailid").show();
$("#emailid").focus();
return false;
}
else
{
$("#error_emailid").hide();
}
if ( trim($("#phone").val()) == '' )
{
$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
$("#error_phone").show();
$("#phone").val('').focus();
return false;
}
else
{
var value = trim($("#phone").val());
var phonefilter = /^(?!(0))\d{3}[\-]\d{3}[\-]\d{4}$/;
if ( !phonefilter.test(value) )
{
$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
$("#error_phone").show();
$("#phone").focus();
return false;

}
else
{
$("#error_phone").hide();
}
}
if ( trim($("#comments").val()) == '' )
{
$("#error_comments").html('Please enter Comments/Inquiry');
$("#error_comments").show();
$("#comments").val('').focus();
return false;
}
else
{
$("#error_comments").hide();
}
});
});
.instruction {
  font-size:13px;
  font-weight:600;
  color:green;
}
.required {
  font-size:13px;
  color:#D00;
}
.error {
  font-size:11px;
font-weight: 600;
color:#D00;
letter-spacing: 1px;
background-color:transparent;
}
.has-float-label{
display:block;
position:relative
}
.has-float-label label,.has-float-label>span{
position:absolute;
cursor:text;
font-size:75%;
opacity:1;
-webkit-transition:all .2s;
transition:all .2s;
top:-.5em;
left:.75rem;
z-index:3;
line-height:1;
padding:0 2px;  
background:#fff;
}
.has-float-label label::after,.has-float-label>span::after{
content:" ";
display:block;
position:absolute;
background:#fff;
height:2px;
top:50%;
left:-.2em;
right:-.2em;
z-index:-1
}
.has-float-label .form-control::-webkit-input-placeholder{
opacity:1;
-webkit-transition:all .2s;
transition:all .2s
}
.has-float-label .form-control::-moz-placeholder{
opacity:1;
transition:all .2s
}
.has-float-label ....

...let-shown:not(:focus)::placeholder{
opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*{
font-size:100%;
color: #6c757d;
opacity: 1;
top:.3em
}
.input-group .has-float-label{
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;
margin-bottom:0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-directio...

...ating:center
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
margin-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12">
        <h4 class="card-title">Contact Us</h4>
        <form action="" method="post" accept-charset="utf-8">
            <div class="form-row">
                <div class="form-group col-md-6">
                   
                    <span class="has-float-label">
                 ...


....Name (Optional)">
                        <label for="companyname">Company Name <span class="text-muted">(Optional)</span></label>
                    </span>
                </div>
            </div>
            <div class="form-group">
                
                <span class="has-float-label">
                    <textarea name="comments" cols="50" rows="5" class="form-control" id="comments" placeholder="Comments/Inquiry" required="required"></textarea>
                    <label for="comments">Comments/Inquiry <span class="required">*</span></label>
                </span><span id="error_comments" class="error"></span>
            </div>
            <input type="submit" name="btn_contactus" value="Submit" class="btn btn-primary" id="btn_contactus" title="Submit">
        </form>
        </div>
    </div>
</div>

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

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

To achieve a text color that contrasts well with any background, I need to make sure it's either black or white. The background in my app can vary in color and format, so finding the perfect solution has been challenging. Using mix-blend-mode doesn&a ...

javascriptcssangularlessbackground-color

Media query failing to target HTML form element

Is it possible to dynamically adjust the font size of form labels and input fields based on browser width? I've heard that fonts can't automatically 'scale down' when the browser width decreases, requiring media queries instead. I atte ...

htmlcss

CSS magic: Text animation letter by letter

I have a <div> with text. <div> to be revealed on the page one character at a time:</p> <div>, the animation should stop and display the full text instantly.</p> In summary, I aim to replicate an effect commonly seen in Jap ...

javascripthtmlcssanimation

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...

javascripthtmlangulartypescripttypeerror

Organize three image links side by side using HTML layout

Hello there! I'm currently working on a website project and I'm struggling with arranging some image links in a specific layout. The grey rectangles you see represent where the images should be placed, all of them are uniform in size (275 x 186) ...

csshtml

Top method for uploading outside materials

My website is running smoothly with fast load speeds on a one-page layout, but I want to ensure it stays that way by preventing slow loading times. Right now, I have a portfolio page with tiles that pop up an overlay and slider when clicked. The current m ...

jqueryhtmlload

I need to add numerous arrays to an XML file using PHP Codeigniter

After extracting various values from HTML table rows, I am looking to submit them as an XML Array. However, I am unsure of how to convert them into a multidimensional PHP array. Here is the current structure of my array: Array ( [RSVRS_TRX_H_ID] ...

phphtmlarraysmultidimensional-array

Creating smooth transitions using Angular's ngif directive along with CSS animations to slide elements in and out

I am currently working on a side panel that needs to slide in and out when a button is clicked, and I want to achieve this using pure CSS. However, I'm struggling to make the transition smooth. I've experimented with keyframes but haven't b ...

cssangularjsanimationng-animate

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

Displaying TestNG Reporter information in Gradle-generated HTML test reports

I've been searching high and low for a solution to my problem with no luck, so I'm turning directly to you. Is there any way to display TestNG's Reporter output in Gradle HTML reports? Here's the scenario: I have multiple testNG test m ...

htmlgradlereporttestng

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Can you explain why when using `<button>` within `<input type="file" />` it doesn't activate the native file selector, but it works fine with `<div>`?

Kindly review this simple example .hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; visibility: hidden; } <label for="inputFile"> <input id="inputFile" class="hidden" type="file" /> <div>Clic ...

javascripthtml

Is it possible to transfer a child from one parent to another using JavaScript?

I need help with moving an element from one parent to another using JavaScript, preferably using the jQuery library. Original code: <div id = "div1"> <p id = "paragraph"> Lorem ipsum dolor sit amet, adipiscing pellentesque egestas. &l ...

javascriptjqueryhtmlparent-child

Converting a list of strings into dynamic, interactive displays

My search engine function retrieves an array called 'articles' which contains different articles. However, I want to enhance the design to resemble more of a Twitter news feed layout. Additionally, I would like to implement a feature where users ...

pythoncsspython-3.xuser-interfaceplotly-dash

Adjusting the color scheme of a Checkbox Button in Bootstrap 4

Seeking advice on locating overrides for certain css properties. Take a look at this illustration on https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons. The contrast in color between the activated and deactivated states is n ...

csstwitter-bootstrapsassbootstrap-4

What is the process for setting up a template to save my HTML document while developing a web application using Python's Flask Framework in the PyCharm IDE?

I am currently working on a tutorial with FreeCodeCamp that involves using Python's Flask Framework to develop a web application in PyCharm. However, I have hit a roadblock at a part that mentions 'Flask searches for HTML files in a directory nam ...

pythonhtmlflaskpycharm

Is there a way for me to customize the WordPress image page layout?

Whenever I upload images to WordPress, I notice that I can easily click on "View" while hovering over the images. This takes me to a page with a permalink that uses the image title as the URL and follows the default post format. Surprisingly, these image ...

htmlmysqlwordpress

Search for styling cues within the text and transform them into distinct elements

I was inspired to develop a unique text editor that utilizes cues within the text, such as :strong:, to set formatting rules. Here is the code snippet I have so far: <?php $document = $_GET["document"]; $user = $_GET["user"]; if ($user != n ...

javascriptjqueryhtmlcss

Is there a way for me to transition a grid from 4x3 to 3x4 at a specific breakpoint in the media query?

I am currently working on creating a responsive grid layout. Initially, the grid is set up as a 4x3 configuration, but once the screen width reaches 720px, I need it to convert into a 3x4 grid. The challenge is that I must accomplish this using only HTML a ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Show information from the database in an HTML table

I'm struggling to populate a table in HTML with data from a database. Check out my code: Here's the PHP code snippet: if ($_SERVER['REQUEST_METHOD'] == 'POST') { $type_user = $_POST['type_user']; $sql = "SELECT ...

phphtmlmysql