Design a floating text box similar to Gmail's style by incorporating Google's Material Design Lite

I have been utilizing the Material design lite library in an attempt to replicate the Floating text box feature seen in Gmail by Google. Despite not finding any official documentation on this particular component, I decided to experiment with the following code snippet: 

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
     <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
     <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>

Upon testing this code, the resulting design resembled something like this:

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

My goal is to achieve a text box design similar to the one displayed here:

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

Is there a particular approach or method to achieve this specific design?

htmlcssmaterial-designmaterial-design-lite

Answer №1

Check out my creation: 

<div id="googleLogIn" style="position:absolute;">
 <input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;" 
 placeholder="">
 <p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
 Enter Email or Phone Number</p>
</div>

It closely resembles what you're looking for.

Answer №2

For a unique design, consider utilizing the fieldset and legend HTML tags:

<span style="font-family:arial;font-size:.9em">
    <fieldset style="width:300px;border-color:blue;border-radius:5px;padding:10px">
    <legend style="color:blue">&nbsp;Enter your Email or Phone Number&nbsp;</legend>
    <input type="text" style="border:0;font-size:2em;">
    </fieldset><br>
</span>
<span style="font-family:arial;color:blue;font-weight:bold">Forgot your email address?</span>

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

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

Entering a string into Angular

Within my function, I trigger the opening of a modal that is populated by a PHP file template. Within this template, there exists a div element containing the value {{msg_text}}. Inside my JavaScript file, I initialize $scope.msg_text so that when the mod ...

javascriptphphtmlangularjs

Displaying an additional section using hover effects in Bootstrap

I recently utilized Bootstrap to create pricing tables which can be viewed here: http://www.bootply.com/VyHsJBDoNc Is there a way for me to implement hover functionality on a span element (+ More Information!) that will display additional information as s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue encountered with AJAX multiple image uploader

I'm attempting to create an PHP and JavaScript (jQuery using $.ajax) image uploader. HTML: <form method="post" action="php/inc.upload.php" id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file[]" a ...

javascriptphpjqueryhtmlajax

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

jquerycssajax

Here is a guide on determining the date variance in PHP by leveraging jQuery

I have been attempting to use the jQuery change function to calculate the variance between two dates, but I am encountering a problem as the code seems to be running smoothly without returning any results... <input type="text" name="datte1" class="form ...

phpjqueryhtmlajax

Fixed-top navbar in Bootstrap obscuring webpage contents

I have tried various solutions to the issue at hand, but nothing seems to be working. I applied padding-top to the container of my main content, but when I add the following CSS: @media (max-width: 768px) { body{ padding: 0; } } it overrides the padd ...

jqueryhtmlcsstwitter-bootstrap

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

javascriptcsscanvassvgcanvg

Converting HTML into an object using $compile

I am currently working on calling an HTML template and want to bind the data with Angular. I successfully retrieve the data to bind and the HTML, but when I try to compile it, it returns all the HTML binded as an object. How can I convert it back to plain ...

javascripthtmlangularjs

Deploying static files with Django in a production environment

My Django application is functioning properly on Ubuntu 14.04 with nginx 1.10, Django 1.10.2, and uWSGI 2.0.14. It is able to load static files such as JavaScript, CSS, and images, but the CSS files are not being applied to my website. Below is the configu ...

pythoncssdjangonginxstatic

Steps for generating a dropdown menu using API JSON information

I'm new to using Webapi with AngularJS. I have a URL that returns data in JSON format, and I want to extract only the employee names from the data and display them in a dropdown list using AngularJS. Any assistance would be greatly appreciated. ...

javascripthtmlangularjsasp.net-web-api

Creating rounded corners in Firefox can result in a gap between the border and the background

I'm trying to round the corners of a div, but in Firefox there seems to be an issue with whitespace between the border and background color. Check out my demo fiddle. <div>&nbsp;</div> div { margin: 20px; width: 250px; ...

htmlfirefoxcss

Using Material-UI to showcase a TextField with a labelWidth set to zero

I need to showcase a specific field on my website. https://i.stack.imgur.com/PJUW7.png However, the issue I'm facing is that even when the field is in focus, the border remains unaffected and does not get cut off by the label. https://i.stack.imgur ...

cssreactjsmaterial-ui

The issue with border radius property on the scrollbar of a bootstrap dropdown menu

Is the scroll bar of a bootstrap dropdown menu sticking out of the box when using the border radius property? Looking for a solution? Check out this example code and preview: <div class="container py-4"> <div class="dropdo ...

cssbootstrap-5

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

Is there a way to dynamically change the direction of the owl-carousel-o angular slider based on the selected language? Currently, I have set rtl: true in the owl-carousel configuration during initialization. However, when the user switches to a different ...

javascriptcssangularowl-carousel

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss

Customizing the color of pagination in Bootstrap

Here is the pagination control I am working on: https://i.sstatic.net/iVufm.png I have been trying to change the color of the pagination labels to purple, but my CSS overrides are not working. Here is what I currently have in my stylesheet: /* Paginatio ...

csstwitter-bootstrappagination

Is it possible to reset the value of a current request attribute?

I designed a homepage that consists of a header, a sidebar, and a div tag. When a user clicks on the "register" button, Registration.jsp is loaded into the div tag. After successfully submitting the registration form, I want to redirect it back to the sa ...

jqueryhtmljsprequest

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

javascriptjqueryhtmlcss

Is it time to delete a bootstrap attribute?

I have implemented a bootstrap class for ul/li items that adds a border around an li item when clicked. However, I am facing an issue where only the first list item is highlighted on all 4 sides when clicked, while the rest of the list items only have 3 ...

cssbootstrap-5