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

Implement an event listener on the final element of a webpage utilizing querySelector

I need help with a password security check feature that changes field borders to green or red based on certain conditions. Despite successfully implementing it, the JavaScript code only selects the first field (nickname) instead of the last one. I've ...

javascripthtmlselectaddeventlistenerqueryselector

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

javascriptjquerycsssafari

Click on the ng-click attribute to access the HTML page

I need a button that can perform the following tasks: Execute multiple functions from the controller using ng-click(they must be called in HTML) Direct to another html page located in "static/page.html" onclick, when used for navigation (location.hr ...

htmlangularjs

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

javascriptjqueryhtml

My JavaScript/Jquery functions are not running as expected

I need some help creating a simple image rotation feature. I have a folder named comics where the images are stored locally with names like comic_(number). However, when I click my buttons, nothing happens. The previous button doesn't even get disable ...

javascriptjqueryhtml

The v-for directive is displaying my list in a single row with multiple columns instead of in a single column with multiple rows

Can someone please assist in rendering my list as shown below: A B C The current rendering looks like this: 1: A 2: B 3: C Below is the code snippet: To-Do List: <input type="text" class = "todo" placeholder = "Next Item" v-on:keyup.enter="add ...

javascripthtmlvue.js

How can we restrict a textbox to only accept alphanumeric characters using solely HTML code?

Imagine a scenario where you have a textbox and your goal is to allow only alphanumeric characters (case insensitive). You've already achieved this using javascript and regex.test(), but now you're wondering if there is a simpler way to implement ...

htmlstringtextbox

How to position a fixed element in relation to a wrapper div using HTML and CSS

I need assistance with positioning the floating box on the right side of the window on this particular page. My goal is to have this box relative to the white div containing all the text, so instead of it sticking to the window edge, it should float aroun ...

htmlcssposition

What is the process for creating a new web page? [Exploring web design]

When creating a new page, how exactly does it work? For instance, on a website that allows users to create posts, you may see a link like this: example.com/post/randomised123 I'm curious - does this process also involve server directories like pop ...

phphtmldatabasewebdirectory

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

javascripthtmljquerycsscss-selectors

Error encountered when attempting to utilize a variable within an EJS template document

I seem to be encountering some difficulties while attempting to get an EJS template file to recognize a variable that holds the rows from an SQLite3 table query in a related .js file. Whenever I try to access that route by launching the server, I receive a ...

htmlnode.jsexpressejs

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

Adding tags to a URL using jQuery without causing a page refresh

I am in the process of developing a "builder" page that allows users to choose an element from a dropdown menu and create a webpage. Since we don't have access to a database for this task, I want to save the elements in the URL so it can be shared via ...

jqueryhtmlfragment-identifier

Optimal method for passing a variable to external PHP code

I have encountered difficulties in getting my code to work, and I am seeking guidance on the correct approach to take. The issue lies within a page that contains a dynamically generated select box populated with names from a MySQL database. The select box ...

phphtmlmysql

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

jqueryhtmlrweb-scrapingclick

Challenge with Hovering within Cufon Elements

When utilizing multiple lists and hover states, the parent Cufon style takes over the child. For instance, in the scenario below, when hovering over the Second Level link, it will switch to a different weight. Is there a setting I can adjust to keep the n ...

jqueryhtmlcsstypescufon

What is the best method for adding a line break in the body of an email when we include the recipient, subject, and message?

Do you have a requirement where information needs to be sent to an end user via Gmail (preferred) and they need to click on a button in the email body to respond? The button response is set up with predefined to, subject, and body fields, but there are dif ...

htmlformsgmail

Update the CSS styles using properties specified within an object

Is it possible to dynamically apply CSS styles stored in a JavaScript object to elements? For instance, can we change the width and background of a basic <div> element: <div id="box"></div> <button id="btn">click me</button> ...

javascripthtmlcss

Setting images on various screens with Bootstrap can be achieved by utilizing the responsive class utilities

Is it possible to display 2 images on a small screen and 4 images on a large screen using Bootstrap? How can this be achieved? <div class="row"> <div class="col-sm-6 col-md-3 col-lg-2"> <img src=""> </ ...

htmlbootstrap-4

What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Here are my two div elements: <div class='container'> <div class='left'></div> <div class='centered'></div> </div> I am looking to center the second inner div and have the first inner ...

htmlcssflexbox