Ensure the placeholder remains front and center, growing in size as it moves vertically

.inpsearch{
    border:2px solid #bbb;
    border-radius:14px;
    height:29px;
    padding:0 9px;
}

.inpsearch::-webkit-input-placeholder {
    color: #ccc;
    font-family:arial;
    font-size:20px;
}
<input type='search' class='inpsearch' placeholder='&#x1F50D'>

I am looking to enhance the search icon placeholder by increasing its size, however when I increase the font size it ends up at the top border of the input field.

Despite trying with padding and margin adjustments, I have been unsuccessful in keeping the placeholder centered vertically.

Is there a way to maintain the placeholder's vertical centering while increasing the font size?

htmlcssplaceholder

Answer №1

If you want to adjust the position of your placeholder, you can use transform: translateY(2px)

.inpsearch{
    border:2px solid #bbb;
    border-radius:14px;
    height:29px;
    padding:0 9px;
}

.inpsearch::-webkit-input-placeholder {
    color: #ccc;
    font-family:arial;
    font-size:20px;
    transform: translateY(2px);
}
<input type='search' class='inpsearch' placeholder='&#x1F50D'>

Answer №2

To ensure perfect alignment, we decided to maintain the same font size for the input field. However, doing so would alter the input font, which is not ideal. Instead, we can revert the changes upon user input using either JavaScript or, more conveniently, CSS.

For a search input, it seems logical that it should be mandatory. This requirement enables us to utilize the :valid selector effectively.

.inpsearch {
  border: 2px solid #bbb;
  border-radius: 14px;
  height: 29px;
  padding: 0 9px;
  font-size: 20px;
  width: 150px;
}

.inpsearch:valid {
  /* here we can either set it back to "initial" */
  /* or define the font size we want our input to normally be */
  font-size: initial;
}

.inpsearch::-webkit-input-placeholder {
  color: #ccc;
  font-family: arial;
  font-size: 20px;
}
<input type='search' required="required" class='inpsearch' placeholder='&#x1F50D'>
<br>

The downside is that a fixed width needs to be set on the input field to prevent the font size from affecting it.

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

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

javascriptjqueryhtmljsondatatables

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

htmlcssangular

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

The alignment of the horizontal menu items is off

Currently, I am working with asp.net and dealing with a horizontal menu issue. The alignment problem arises where the right side of Menu B appears higher than the left one (Menu A). I have included my code below for reference. Any suggestions or assistance ...

htmlcssalignment

What are some effective ways to stretch specific muscles?

I am facing an issue with my select element. The default value is "please choose," but there are options like "Accommodation & Hotels" that are longer and not clearly visible on IE browsers, though they work fine in Firefox. How can I resolve this issue? S ...

javascripthtmlcss

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...

javascriptc#jqueryhtmlcss

Specifying file types in an HTML upload form

Is there a way to restrict my form so that it only allows jpeg files? Currently, it is displaying all types of files. <input name="image" type="file" /> Also, are there any JavaScript functions available for showing progress? ...

htmluploadinputprogressfile-type

AngularJS seems to be ignoring CSS styles when displaying list items in the ng-repeat loop

After coming across a tutorial on creating round circles connected by a line in CSS, I decided to implement it myself. Interestingly, everything worked perfectly fine when I tested it with static HTML. However, when I tried to make it dynamic using Angular ...

javascripthtmlangularjscsstemplates

Tips on identifying HTML email input validation using JavaScript?

Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...

javascripthtml

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

I am working on a layout that involves a container with "cards": images positioned above with related text below. Here's an example: <div class = "cards"> <div class = "card"> <div class = "image-wrap"> <img src= "im ...

htmlcssflexboxcss-grid

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

javascripthtmlcsspseudo-element

What are some strategies for preventing the $window.alert function from being triggered within an AngularJS controller's scope?

How can I prevent the alert from appearing on my dashboard? Do you have any suggestions? Thank you! I attempted to override the alert empty function in my controller, but I am still encountering the window alert when I navigate to my page. $window.alert ...

javascripthtmlangularjs

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

javascripthtml

Issues arise with the behavior of Bootstrap design when adapting to different screen sizes, as well as

I am currently working on designing my personal portfolio using Bootstrap. I have made some progress with the setup, but I am encountering some issues. When I resize the window, the top menu collapses into a button. However, when I click on the button, n ...

htmlcsstwitter-bootstrap-3

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

htmlcssreactjs

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

I've hit a roadblock in trying to figure out the React and printing issue for the past week and a half, and it feels like I'm going in circles. Despite finding some helpful solutions on Stack Overflow, none of them seem to work completely for me ...

javascriptcssreactjsprinting

PHP: Create a list of checkboxes and submit them via form

Following a SQL query, I receive a form displaying a list of data, each line accompanied by checkboxes. The purpose is to allow users to select certain lines for deletion from the database upon form submission. In order to identify which lines are selecte ...

phphtmlpost

Asynchronously updating a Django model instance in real-time

On my website, there is a button that allows users to view notifications as a drop-down without navigating away from the current page. I am interested in updating the unread field of every notification for a user from True to False when this button is clic ...

pythonhtmldjangoasynchronouscelery

"Customize the font style of columns in a WordPress table created with TablePress by setting them to it

Recently, I designed a table in a WordPress blog using the TablePress plugin. My intention now is to style the left column's font in italics, excluding the table header. ...

csswordpress