Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com?
I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield".
Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com?
I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield".
To create the effect of putting another element inside an image, you can't directly insert it, but you can achieve this by following these steps:
Start by using css to style the container:
<style>
.search-container{background:url(your/image/path) no-repeat top left;width:200px;height:50px;}
.search-container input{width:150px;}
.search-container button{width:40px;}
</style>
Then, structure your html like this:
<html>
<head></head>
<body>
<div class="search-container">
<input type="text" /> <button>Search</button>
</div>
</body>
</html>
Now, the container will display a background image and contain your search form elements (input and button).
If you want to reset the default styles for the input field, use the following:
.search-container input{border:none;background:transparent;}
It has been highlighted by previous responses that the approach you were searching for is not recommended. Essentially, you are superimposing a text field over an image and then concealing the borders and backgrounds of the field so only the image is visible.
The technique involves using absolute positioning to place the text field and button over the image while removing any borders and backgrounds, rendering the elements virtually invisible and displaying the image beneath. For a straightforward example, refer to this fiddle: http://jsfiddle.net/a2pQ2/2/
Below is the HTML code:
<div class="searchbox">
<input type="text" class="search" id="search" value="Search in 80,000+ Gadgets...">
<button id="btnSearch" type="button" class="btn_search"></button>
</div>
And here's the corresponding CSS:
.searchbox {
position: relative;
width: 367px;
height: 36px;
background: url(http://tctel.com/search.jpg) no-repeat;
}
.searchbox .search
{
border: none;
position: absolute;
top: 6px;
left: 6px;
height: 24px;
line-height: 24px;
width: 287px;
outline: none;
}
.searchbox .btn_search
{
border: none;
position: absolute;
top: 2px;
right: 2px;
height: 32px;
width: 71px;
background: transparent;
cursor: pointer;
}
In this setup, the searchbox acts as the container with a background image measuring 367px in width and 36px in height. Positioning it as relative allows for absolute placement of its children elements.
The .search represents the text field positioned absolutely with specific distance values from the edges of the image. The dimensions and styling adjustments ensure seamless integration with the image.
Conversely, .btn_search refers to the button element which is strategically placed to the right side, with distinct styling choices to maintain a cohesive design.
Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...
Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...
I am working on a project that involves a selection input with around 5 options. Additionally, there is an empty table that follows this format: <table> <tr> <td>X (for deletion)</td> <td>Option name</td> ...
https://i.stack.imgur.com/vMgGS.png Is there a way to apply the same padding to the border as seen on the button above? Adding the border directly to the td element seems like a solution, but it is not feasible due to the presence of border-radius in anot ...
I am in the process of creating a website with various pages dedicated to About information, Projects, Events, and more. One issue I am facing is how to seamlessly include my navigation bar, header, and footer across all HTML files without duplicating the ...
Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...
I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...
Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...
I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...
I need to determine the length of seconds. If the second is only one character long, I want to add a 0 in front of it. Otherwise, no action is needed. Below is my code: <p>Click the button to show the current number of seconds.</p> <p id= ...
I'm in the process of creating a unique Sudoku generator that incorporates randomness into its design. Within my code, there's a particular function responsible for generating the Sudoku puzzles. The issue I'm encountering is the inability t ...
I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...
Can someone assist me with a script that activates an audio clip when five icons on a page are clicked? The image of the icons can be found below: https://i.stack.imgur.com/mBC6o.png Here is the HTML code: <div class="slide overlay-container" id="int ...
Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...
I've been searching online, but haven't come across a definitive answer yet. I'm interested in knowing if there is an issue with Firefox 3 when applying a negative margin to a div that is either clearing a float or containing another floated ...
This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...
I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...
Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when users are in close proximity to the ...
I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...
I have a small registration form that requires validation before submission. In order to achieve this, I've developed a JavaScript function as shown below: var name = document.getElementById('name').value; var company = document.getElem ...