HTML input field that shows a hint text when selected

Is there a way to create a text box that shows a hint when clicked on?

For example, you can see this feature by clicking on the address text box in the following link:

Answer №1

It's completely achievable without the use of JavaScript.

<input type="text" value="Click on me to reveal a surprise!" style="width: 200px; height: 30px;"/>
<div>Ta-da! You've discovered me!</div>

.input + div {
    display: none;
    position: relative;
    top: -30px;
    left: 200px;
}

.input:focus + div {
        display: block;
}

Have a blast ;)

Answer №2

Creating a form with placeholder text is quite straightforward

<input type="text" placeholder = "your gray text" />

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

Choose options from the month dropdown menu using Selenium WebDriver

Presently focused on working with Selenium WebDriver and Java. I am attempting to pick an option from a date picker form. When trying to select the month from the dropdown of the date picker, an error is displayed stating Unable to locate element: {"method ...

No adjustment in color upon switching themes

I've been struggling to achieve the desired outcome while working on a small coding task. The goal is to modify the color of the screen background, text, and button as illustrated in the uploaded image. I have three code files for this task - index, t ...

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

I have been tackling a unique challenge with my custom CMS in Drupal for a couple of weeks now. I am facing an issue where I need to dynamically load a URL by extracting the node ID from the target Drupal page and appending it to the base URL of the websit ...

Images and videos are not appearing on GithubPages when viewed online, but they are visible

Check out my GitHub repository: https://github.com/Snipervuk/ChristianMilicevic I'm encountering an issue where my HTML images or videos are not displaying on my GitHub pages online, but they do display locally. I've attempted several solutions ...

Bug in Sublime Text's Autocomplete Feature for HTML Tags

Recently, I've encountered a small bug with my Sublime Text 3. Every time I try to auto-complete certain HTML tags, an extra '<' is added before the first tag, forcing me to manually delete it each time. I'm currently using build 317 ...

Display or conceal section based on selected checkboxes

I'm currently working on a JavaScript script that involves showing/hiding elements based on radio button and checkbox selections. The goal is to reveal a hidden section when certain checkboxes are checked, as illustrated in the screenshot below: http ...

Sas: The outcome matches the viewer results exactly

I am reaching out because I am experiencing an issue with my results viewer in Sas 9.4. When the results load, they appear similar to the output format. Instead of displaying a table with cells, it appears as a table drawn with -+|. The layout options do ...

Sticky positioning and outline effects

I have been working on creating a scrollable list with "sticky" headers. The functionality seems to be in place, but there are some visual glitches that I've encountered. The list itself is structured using a ul element styled with the Bootstrap 5 cl ...

What is the best way to display the information contained within a .nfo file on a website?

Does anyone know of a plugin or code that can display the content of a .nfo file on a webpage (html or php)? I want to create multiple web pages with individual .nfo files, but I'm not sure if this is achievable through coding or if there's a scr ...

The process of transforming four columns into two columns and two rows

I am aiming to create a layout that displays 4 columns on desktop and then breaks down into 2 columns and 2 rows on smaller screens. https://i.stack.imgur.com/GZ4nQ.png https://i.stack.imgur.com/5ZCrQ.png Any suggestions on how I can achieve this layout ...

Why is the feedback section showing a horizontal scrollbar?

I'm puzzled as to why a horizontal scrollbar is appearing in the feedback section. I've examined the elements but can't seem to pinpoint the issue. ...

Exploring NodeJS Express Routing Across Various URIs/URLs

In my application, there is a public folder that contains HTML/CSS3/JS code. This folder has two main parts: one with the public facing index.html inside public/web and another with an admin view exclusively for admins. Below is the basic layout: public ...

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

I'm currently tackling an inquiry. The code I crafted seems to be functioning without any issues: (function () { if($('#target:contains("bold")')) { $('#target span:first').css('font-weight','bold ...

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

Using conditional statements in CodeIgniter to display various menus

I encountered an issue with a variable in my code. When I attempt to retrieve its value, it shows up as undefined despite having stored the session of the variable "$level" and passing it to the view. I find it strange that the condition of the variable tu ...

My Horizontal Drop Down Menu won't stay still, how can I make it stop moving?

I'm a beginner with dropdown menus and I'm struggling to prevent my dropdown menu from expanding and pushing the main buttons. I think it's related to a positioning adjustment, but I can't pinpoint where or what it is. Here is the link ...

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

Scripted AngularJS directive

Essentially, the directive I have defined as sample.js is: app.directive('myDirective', function() { return { restrict: 'E', scope: { info: '=' }, templateUrl: 'link-to-sam ...

Discover identical HTML elements

I have a simple HTML code that I would like to split into similar parts: <input id="checkbox1"><label><br> <input id="checkbox2"><label><br> <input id="checkbox3"><label><br> The desired result should ...

Populate an HTML layout with MySQL information and dynamically add the content to the page using JavaScript

I'm facing a challenge with creating an about us page for a website. I am using a template to structure the page and I want to populate it with MySQL data. I have enclosed the entire <div> of the personcard within a <script> tag, but the p ...