Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div

Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div?

Check out the jsfiddle: http://jsfiddle.net/930yrzqa/6/

Here is what I want:

<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">


#input_container {
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 20px;
  direction: rtl;
  width: 200px;
}

#input_img {
  position: absolute;
  bottom: 2px;
  right: 5px;
  width: 24px;
  height: 24px;
}

.input-test {
  display: block;
  margin: 0 0 0 auto;
  width: 169px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  color: $black;
  //background-image: url(http://i.imgur.com/2LGbUV2.png);
  background-position: 130px 5px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 10px;
  height: 20px;
  margin: 0;
  padding-right: 30px;
  width: 100%;
}
<div id="input_container">
  <input type="text" class="input-test">
   <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

jqueryhtmlcss

Answer №1

If you want to position the image relative to itself and place it over the input box, you can use the following CSS:

#input_img {
  position: relative;
  left: 190px;
  bottom: 27px;
}


.input-test {
  display: block;
  margin: 0 20px;
  width: 200px;
  height: 34px;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
  font-size: 16px;
  color: black;
  padding: 12px 20px 12px 10px;
  height: 20px;
  padding-right: 30px;
}

#input_img {
  width: 24px;
  height: 24px;
  position: relative;

  /* adjust as necessary */
  left: 190px;
  bottom: 27px;
}
  <input type="text" class="input-test">
  <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">

Answer №2

You can create the same outcome using only the input field without requiring the image element. :) 

#input_container {
  position: relative;
  padding: 0 0 5px 20px;
  margin-left: 15px;
  direction: rtl;
  width: 220px;
}

#input_img {
  position: absolute;
  bottom: 4px;
  right: 8px;
  width: 30px;
  height: 30px;
}

.input-field {
  display: block;
  margin: 0 auto;
  width: 189px;
  height: 38px;
  box-sizing: border-box;
  border: 2px solid blue;
  border-radius: 6px;
  font-size: 18px;
  background-color: white;
  color: black;
  background-repeat: no-repeat;
  padding: 12px 22px 12px 10px;
  padding-right: 35px;
  position: relative;
}

.input-field{
  background: url("https://cdn3.iconfinder.com/data/icons/56-slim-icons/50/calendar.png");
 background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
 <input type="text" class="input-field">

Answer №3

If you want to achieve this functionality using jQuery, simply remove the div and use the following code:

$( "input" ).wrap( "<div id='input_container'></div>" );

You can also view a live example on jsfiddle:http://jsfiddle.net/930yrzqa/7/

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

What steps should be followed to display an HTML page within an HTML div?

The question I have is a bit misleading, as I'm not looking for guidance on how to open an HTML document in a div. Rather, I am currently facing an issue where I am unable to replace the HTML file that I have already placed in a div. Initially, I pla ...

javascriptjqueryhtmlajax

I am experiencing an issue with the HTML5 video tag as it is not displaying the

Having trouble playing a user-uploaded video using the <video tag. The video doesn't seem to load into the DOM properly. Here's the code snippet: function Videos ({uploadedFiles}){ if (uploadedFiles) { console.log(uploadedFile ...

javascripthtmlreactjsvideo

How to responsively position and scale a background image for a full-width div

Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...

cssreactjssvgbackground-image

Clicking on a link to materialize will open a div containing a form for editing MySQL data

My table is fetching client information from a database, and one of the <th> tags contains an edit link with a unique id specific to each client in that row. The code snippet looks something like this: <a class="modal-trigger" href="#edit?id=< ...

jquerymysqlajaxmaterialize

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

Using canvas elements to position divs in three.js

I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such a ...

javascripthtmlcss

issue with manipulating URLs in Express routing

Looking for assistance with Express routing. I want users to only see localhost:3000/page2 when they go to /page2, instead of localhost:3000/page2.html I have three HTML pages - page1.html, page2.html, and page3.html. I've created a server using Expr ...

javascripthtmlexpressroutespath

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

javascriptphpjqueryhtmlcheckbox

Looking for a seamless way to convert jsp code to html using sightly in AEM 6.1?

I need help transforming JSP code to HTML using Sightly in AEM. In the JSP code, we have a scriptlet that stores a value from the dialog into a JSP variable called "coltype" using the code pageContext.setAttribute("coltype", xssAPI.filterHTML(properties. ...

javascripthtmljspaemsightly

Creating custom components in React

At times, I find myself in need of a special UI component such as a multiple range slider. However, I have a preference for not relying on third-party libraries, so I usually opt to create the component myself. As time has passed, I have completely stopped ...

htmlreactjsformsredux

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

htmlcssreactjstailwind-css

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...

htmlcsstwitter-bootstrap

Issues with loading CSS, JavaScript, and links when deploying a Spring Boot application as a WAR file in Tomcat

My Spring boot web application runs smoothly as an executable jar, but when I build it as a war and deploy it to Tomcat, the CSS and JS files fail to load. Upon further investigation, I discovered that all links are pointing to the root context path "/" I ...

javahtmlcssspringspring-boot

Do jQuery and AJAX both support application/json content type in all web browsers?

I have been managing my ajax requests like this: @header("Content-Type: text/html; charset=".get_option('blog_charset')); and in the JavaScript: $.ajax(.... ... success: function(response){ var obj = eval('('+response+') ...

jqueryhtmlajaxjson

The .each() function is invoked just one time

Here is the code snippet I am working with: function validateFormInputs() { isValid = true; var counter = 0; $('.form-input input[type="text"]').each(function() { isValid = isValid && validateInput( $(this) ); counter ...

jqueryfunctionloopseach

Managing the closest element depending on the selected option in Angular 5

My task involves accessing the nearest element of a dropdown. The HTML below includes multiple dropdowns and input boxes. When selecting options from the dropdown, I need to enable or disable the input box closest to it. <div class="form-block" *ngFor= ...

htmlangular

Choosing children in jQuery can be tricky, especially when you want to avoid selecting the root element with the same name

I am encountering a challenge with my XML structure where some child elements share the same name as the root element. I am seeking a way to specifically select these child elements without including the root element itself. Despite searching through the j ...

jqueryjquery-selectorsselectorchildrendocument-root

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

csshtml

Is it better to choose AJAX and JQuery for their speed and complexity, or stick with the simplicity of GET requests?

When a user attempts to log in and fails, an error message should be displayed on the page. There are two primary methods that can be used to achieve this: one involves using a form action on the HTML page and handling incorrect login information in the PH ...

phpjavascriptjqueryhtmlajax