Craft a search bar inspired by Google's iconic design using CSS styling

I need to recreate a custom input styled like the Google Material Theme design.

This is the desired outcome:

https://i.stack.imgur.com/QU5dp.png

While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from scratch.

Below is the code I have so far:

input {
  margin-top: -6px;
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
}
<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>
htmlcssmaterial-design

Answer №1

To properly position your label, you should utilize absolute positioning:

.input {
  margin-top: 5px;
}

input {
  margin-bottom: 30px;
  border: solid 2px #00ffb3;
  border-radius: 3px;
  height: 30px;
}

label {
  margin-left: 8px;
  font-weight: lighter;
  position: absolute;
  margin-top: -10px;
  background: #fff;
  padding: 0 5px;
}
<div class="input">
  <label for="text">Message</label>
  <input class="Message" type="text">
</div>

It is recommended to fine-tune this method as needed, but it serves as a starting point. Keep in mind that the fixed pixel margins may not be ideal for responsiveness on devices such as mobile phones.

Answer №2

Empiric provided a solution that functions as you requested. However, you have the flexibility to customize it further with some animations:

.input-wrapper {
  position: relative;
}

.input-wrapper .input {
  padding: 8px 16px;
  border: 2px solid #6200EE;
  border-radius: 3px;
}

.input-wrapper .input:focus+.label {
  top: -5px;
  left: 8px;
}

.input-wrapper .label {
  position: absolute;
  left: 16px;
  top: 10px;
  padding: 0 4px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1;
  color: #6200EE;
  transition: all .15s ease-out;
}
<div class="input-wrapper">
  <input class="input" type="text" id="username">
  <label class="label" for="username">Label</label>
</div>

Answer №3

The <fieldset> element offers a simple and effective way to add some style to your form elements. With just a little bit of CSS styling, you can easily change the colors to suit your design preferences. In the example provided below, the input field is left unstyled, but feel free to customize it according to your needs.

For instance: 

fieldset {
  border: 2px solid lime;
  color: lime;
  border-radius: 5px;
}
<fieldset>
  <legend>Message:</legend>
  <input class="Message" type="text">
</fieldset>

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

A guide on using jQuery to cycle through every row of every table on an HTML page

I am trying to figure out the correct syntax for nesting two loops within each other in jQuery. The first loop should iterate over each table in an HTML page that does not have any IDs or classes, while the second loop should go through each table row of t ...

jqueryhtmlcss

Removing a Dynamic Element in ReactJS

--CustomFieldSection.js-- import React, { Component } from 'react'; import CustomField from './CustomField.js'; class CustomFieldSection extends Component{ constructor(props){ super(props); this.stat ...

javascripthtmlreactjs

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

javascriptjqueryhtmlcsssass

The contents of a Javascript array are not appearing within a div element

I have developed a program that reads JSON data related to a concert event. The JSON file consists of an object named global, which includes details about the band name and venue. Additionally, there is a tickets object that contains information on all ava ...

javascriptjqueryhtmlarraysjson

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

htmlcss

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

htmlcss

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

javascriptjqueryhtmlcssajax

Shadow box with arrow/bubble element using CSS

I am looking to add a box shadow around the outline of the bubble below. <div class=speech-bubble-dark></div> .speech-bubble-dark { position: absolute; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 0.4em; ...

htmlcss

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

phpjavascriptcssajaxcalculator

How can I create a CSS animation for a box element?

During my current project, I have the task of creating a box that will display an animation within 2 seconds and move from one corner to another. What is the most straightforward way to achieve this? ...

css

Utilizing Rvest for extracting data from LinkedIn profiles

I've been trying to scrape my LinkedIn profile using Rvest, but I encountered a problem in the experience section. The XPath below was supposed to retrieve the experience section, but it's returning 0 nodes: Test <- read %>% html_nodes(xpath = & ...

htmlrweb-scrapingrvest

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...

htmlcss

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

javascriptjqueryhtmlajaxpython-3.x

Obtain and retrieve media URL (m3u8) with the help of PHP

I am currently working on a project that involves hosting videos for a client on a website. The videos are loaded externally through m3u8 links on the site. Now, the client has expressed interest in having these videos available on a Roku channel as well. ...

phphtmldomcurlroku

Mixing elements from the entire webpage

My goal is to create a cohesive look for the entire page by applying a background gradient to all layers. #myDIV { width: 400px; height: 400px; background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%); } .bl ...

htmlcss

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

htmlreactjsruby-on-railsreact-rails

What is the best way to include a permanent placeholder within an input field?

I'm trying to insert a font icon inside an input field using the following method: <input type="text" name="your name" placeholder="&#xe00b; YOUR NAME" style="font-family:Flaticon" class="restrict"> Currently, the font icon &#xe00b; is ...

htmlinputfont-awesome

unable to load the ajax file

While setting up Ajax, I encountered an error message in IE that reads: Description: An issue occurred during the processing of a configuration file needed to handle this request. Please check the specific error details below and adjust your configuration ...

c#htmlajaxvisual-studio-2010