What steps should be taken to convert the field into a search icon?

Is it possible to change the field to an icon for mobile devices? See the example below:

https://i.sstatic.net/UNZG8.png

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="col-6">
    <div class="divLogo input-group" style="float: right;">
      <input class="form-control" type="text" placeholder="Search">
      <!--How change to icon?-->
      <div class="input-group-btn">
        <button class="btn btn-danger" type="submit">BUSCAR</button>
      </div>
    </div>
  </div>
</body>

</html>

javascripthtmlcssbootstrap-4

Answer №1

In my opinion, achieving the same result with media queries is possible by adjusting the display based on different screen resolutions. For instance, when targeting resolutions of 1000px and 700px, a font awesome icon could be used instead of a traditional button!

<body>
  <div class="col-6">
    <div class="divLogo input-group" style="float: right;">
      <input class="form-control" type="text" placeholder="Search">
      <!--How change to icon?-->
      <div class="input-group-btn">
        <button class="btn btn-danger" type="submit">BUSCAR</button>
      </div>
    </div>
  </div>
</body>

</html>

Here's the accompanying CSS:

.input-group-btn {
  display: block;
}

.icon-new {
  display: none;
  cursor: pointer;
}

@media (max-width: 1000px) and (min-width: 400px) {
  .input-group-btn {
    display: none;
  }

  .form-control {
    display: none;
  }

  .icon-new {
    display: block;
    background: red;
    padding: 10px;
    border-radius: 10px;
    color: #FFF;
  }
}

If you want another element to appear, consider creating a small JavaScript script utilizing addEventListener to remove 'display: none' from the input and apply CSS styles like width adjustments.

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

Position a flash element adjacent to an input field

I'm struggling to properly align two elements together. Below is the HTML code: <input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' /> <span> <object classid="clsid:d27cdb6e-ae6-11c ...

htmlcss

Retrieving the chosen option from a dropdown using JavaScript

Feeling completely overwhelmed, I’m struggling to retrieve the selected item from a dynamically created select dropdown list using JavaScript. I have a list of items that represent columns in a table. When I click on an item, I want the corresponding co ...

javascriptjquerylistselect

Vuetify's personalized time selection tool failing to update data model and issuing an error message

For a while now, I've been grappling with an issue. I decided to create a custom component with a time picker in Vuetify. The Vue.js docs stated that for custom model components, you need to emit the input like this: <input v-bind:value= ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Extracting information from a Weather API and sharing it on Twitter

Can anyone help me troubleshoot my Twitter bot setup for tweeting out city temperatures? I attempted switching to a different API, but nothing seems to be resolving the issue. console.log('initiating twitter bot...') var Twit = require('t ...

javascriptnode.jsjson

Tips for creating a smooth scrolling header menu on a standard header

<script> $(document).ready(function(){ $(".nav-menu").click(function(e){ e.preventDefault(); id = $(this).data('id'); $('html, body').animate({ scrollTop: $("#"+id).o ...

javascripthtmljquery

Retrieve the position of an element using Python and selenium

Currently, I am working on a project and need to extract the location and size of an element using the following xpath: "//div[@class='titlu']" https://i.sstatic.net/PI1QE.png Upon inspection, it appears that the element is visible with no dist ...

pythonhtmlseleniumselenium-webdriver

Tips for maintaining an organized layout of buttons on a compact screen

When the following HTML code is executed on a small screen, one or more buttons will naturally shift to the "lower line" in order to adjust to the screen size. While this may seem like a good thing initially, unfortunately, any button that moves down a row ...

html

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

Revive the design of a website

As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...

javascripthtmlcss

Incorporate interactive click buttons into your Telegram bot

Currently working on a telegram bot using node.js with the telegram-bot API by yagop. https://github.com/yagop/node-telegram-bot-api My goal is to allow users to stop typing messages and instead just click on buttons that will trigger actions. When a user ...

javascriptnode.jstelegram-bot

Activating the Mobile Menu Function when the Window is Resized

I've developed a JavaScript function that triggers on window resize. When switching between landscape and portrait orientation on mobile devices or tablets, the window dimensions change. This functionality is also useful for browser testing on desktop ...

javascriptjquery

The blur() function in -webkit-filter does not seem to function properly in Vue.js

I'm having trouble implementing the -webkit-filter: blur() property. I tried using "filter" instead, but it still isn't working. Could this be a limitation of Vue.js or are there any other solutions available? <template> <div class=&qu ...

javascriptcssvue.jsfilterwebkit

Navigate to a precise section of the webpage, positioned at a specific distance from the top

When scrolling on my page, the static header moves along with the user. However, when I link to a specific div using the standard method, the div appears behind the header. I would like to utilize: <a href="#css-tutorials">Cascading Style Sheet Tut ...

javascriptjqueryhtmlcss

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

I need assistance with creating a grid of projects where clicking on a specific 'project' in the loop will display the corresponding 'project_expanded' div, while hiding all other 'project_expanded' divs. My initial plan was ...

javascriptphpjqueryhtmlwordpress

Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view. Unfortunately, I attempted the following method without success. Any advice or solut ...

javascripthtmlcss

What is the purpose of the `Bitwise operator |` in the `d3.shuffle` source code and how can it be understood

Learning about the Bitwise operator | can be found in the document here and a helpful video tutorial here. However, understanding the purpose and significance of | may not come easily through basic examples in those resources. In my exploration of the sou ...

javascriptd3.js

Encountering difficulties when serving assets in Express.js?

I am working with a file structure that looks like this: - server.js - controllers - [...] - public - utils - views - home - index.html - js - index.js - css - index.css When my application starts, I include ...

javascriptnode.jsexpress

Using Node.js to render when a task has been completed

I am currently developing a Node.js Application using Express.js. One of the challenges I face is rendering data from another site on a page using Cheerio.js. While this in itself is not an issue, I struggle with determining how to render the data once the ...

javascriptnode.jsexpress

How can I implement a recursive nested template call in Angular 2?

Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...

htmltemplatestypescriptangularangular-directive

Can a module factory be invoked from a different JavaScript file?

I have two separate javascript files and I am trying to retrieve one from another. To achieve this, I have created a Module factory as shown below; var module = angular.module('test',[]); module.factory('$result', function() { va ...

javascriptangularjs