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

My webpage is struggling to locate the CSS stylesheet

Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...

htmlcss

Alternate the color over time using CSS

Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...

javascriptjqueryhtmlcsscolors

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

jquerycssbackground-image

The background image is being cropped outside the item. What steps should I take to display it properly?

I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...

csshtml-listsbackground-image

Navigate through the seamless elements with scroll snapping

I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...

cssscroll

Only the main page is accessible quickly through Express

Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...

htmlnode.jsexpressfs

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

javascripthtmlcssvue.js

Form tag definitions are missing on the login page

Here is a snippet of code I am using: <%= form_tag :action => 'process_login'%> Username: <%= text_field "user", "fullname" %>&#x00A; Password: <%= password_field "user", "password" %>&#x00A; <%= submit_t ...

htmlruby-on-railsruby-on-rails-3

The table printing settings are not compatible with portrait and landscape orientations

I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I ...

htmlcsshtml-tablemedia-queries

Exploring HTML for a specific value using Swift

My journey into learning Swift and Xcode began with a simple project. I decided to work on a project that involved finding a specific value on a website. After successfully retrieving the HTML code, my next step is to isolate and extract the exact value I ...

htmlswiftxcodeparsing

Update the screen layout to a grid when the screen is resized

I have a very specific request regarding the user experience. I want to display four links within a container, positioned next to each other in one row with a vertical line separating them. For example: Link one | Link two | Link three | Link four This ...

htmlcssbootstrap-4flexboxwindow-resize

The div smoothly descended from the top of the page to the center under the control of jQuery

I am trying to implement a feature where a div slides down from the top of the page to the center when a button is clicked. However, my current code seems to be causing the div to slide from the bottom instead of the top. Ideally, I want the div to slide ...

javascriptjquerycssslideslidetoggle

error being triggered due to relative positioning

On my webpage, I have a set of buttons located at the bottom. When I first open the page, all the buttons are displayed properly. However, sometimes the first three buttons become hidden mysteriously and the layout changes. I am puzzled as to what could be ...

htmlcssinternet-explorer

Using ReactJS and SCSS to adjust the height: set the height to be twice the size of the element's

Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...

cssreactjs

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

javascriptcsslistscrollionic-framework

Tips for creating an element that maintains its dimensions when a border is added during a hover effect

One issue I often face is the desire to add a border to an element on hover, only to find that as the border appears, the element's height and width change, causing it to visually jump and potentially push other elements. Is there a solution for this ...

htmlcssdom

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...

javascripthtmlcssreactjsgatsby

Difficulty with animated presentations

As a developer with limited CSS experience, I am trying to create a CSS3 slideshow using only two images. After discovering some interesting code for this purpose, which can be found here, I decided to make a small change to the original code (specifically ...

htmlcss

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

I am having an issue with the bottom border starting from the extreme left of the page. I want it to start from the letter "T" in Tech instead. #page-container { width: 1250px; margin: 0 auto; } h2 { font-weight: normal; padding-left: 15px; ...

htmlcss

Sticky Angular Headers

I am struggling to create a table on my angular page that has fixed headers and footers. <table class="table table-bordered table-striped table-hover" fixed-header> <thead> <tr> <th>Name</th> <t ...

htmlcssangularjshtml-table