Did Google update the login TextBox to look like this today? https://i.sstatic.net/bXPQu.png
There is a border around the text, what is the most effective method to achieve this using HTML & CSS?
Update:
A single answer can be found on StackOverflow at the following link:
Placing <label> text inside the border of a text input
However, I am still searching for the best approach to achieve this.
Utilizing the position:absolute property can also be used for labeling.
div
{
position:relative;
}
input
{
border: 1px solid #0095ff;
border-radius: 4px;
padding: 15px;
}
label
{
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#0095ff;
}<div>
<label>Email or phone</label>
<input/>
</div>Utilize pseudo elements like :before to add text dynamically
div{
position:relative;
}
input
{
border: 2px solid #1a73e8;
border-radius: 4px;
padding: 15px;
}
div:before{
content: 'Email or phone';
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#1a73e8;
}<div>
<input/>
</div>Similarly, you can use <label>/<span> and style it using CSS:
div{
position:relative;
}
input
{
border: 2px solid #1a73e8;
border-radius: 4px;
padding: 15px;
}
label{
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#1a73e8;
} <div>
<label>Email or phone</label>
<input/>
</div>To achieve this effect, you can utilize the fieldset element along with some minimal CSS styling:
fieldset { border: 2px solid cornflowerblue;}
legend {padding: 0 10px;}
label {visibility: hidden; position:absolute;}
input {border: none; padding: 10px;}
input:focus {border: 1px solid silver;}<fieldset>
<legend>Email or Phone</legend>
<label for="demo">Enter your email or phone here</label>
<input type="text" id="demo" />
</fieldset>My Angular web-application has a dropdown menu that looks like this: <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN <span class="caret"></span>&l ...
Looking to create a website similar to CodePen? I have developed a library of assets including buttons, cards, and effects, all built using vue.js. Each asset includes HTML, CSS, and sometimes JS code. In my vanilla JS version, I formatted the code using e ...
Exploring various websites online, I've come across platforms that offer the ability to manipulate data effortlessly. From inserting records to deleting and editing them, the process seems seamless. What's intriguing is how, upon clicking the r ...
Apologies for bringing up what may seem like a basic issue, but I've been searching extensively (even through axios' documentation) and haven't been able to pinpoint exactly what I need to resolve this issue. I have created a simple To-Do we ...
I have created a table with a list and checkboxes next to each element. There is also a Delete button that I want to connect to the delete operation. Here is the code for the Delete button: <tr id="deleteproject" > <td wi ...
I have a container with a padding of 5 (p-5) applied to it. However, I am looking for a way to automatically remove the padding when the screen size is small, without adding more CSS rules. Is there a solution using only bootstrap classes? <div class= ...
I am trying to create a grid-like layout where each column in a row has the same height and contains an image while maintaining its proportions. Currently, I am using the flex-grow property to adjust the ratio of the images. Although this works, it often ...
I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...
This PHP script has got me stuck on a particular issue. I am having trouble splitting the data correctly. Currently, I have a list of numbers in this format: 50.0.1 581 50.0.2 545 50.0.3 541 50.0.4 18 50.0.5 2 50.0.6 33 50.0.7 1 [...] I need to convert ...
i'm attempting to enable this element to be both draggable and rotatable. However, when I apply transform:rotate(0deg);, I am able to drag it anywhere within the parent container. But when I set it to 90deg, there are certain areas that become undrag ...
I have a JavaScript function that is supposed to collect all input values from text boxes and store them in an array. However, I want to remove any input value with the type "button" from the array before proceeding. Here is the code snippet: <!-- lang ...
I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...
Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...
Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...
This is my ejs file titled Post_handling.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>POST-Handling Page</title> </head> <body& ...
I need help with a table that has vertical headers. I want to remove the extra space within the table header and data cells. Here is the code for my table: <table> <tr> <th class="field">Item ID Number:</th> < ...
I have been learning from the AngularJS Tutorial on Code School, but I'm experiencing an issue where my JavaScript code is not rendering properly in the HTML. Below is the snippet of HTML code: <html ng-controller="StoreController as store"> & ...
I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...
Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route). However, an issue ...
Currently, I am facing a challenge in implementing a scroll down arrow. While this is typically a simple task, it has proven to be a bit more complex this time around. The complexity arises from the fact that my customer desires a homepage with an image of ...