Could someone provide guidance on how to place an input text box within a dropdown without using bootstrap? I came across this image showing what I am looking for:
https://i.stack.imgur.com/f7Vl9.png
I prefer to achieve this using only HTML, CSS, and JavaScript. Any assistance would be greatly appreciated as I have been stuck on this issue for quite some time.
Check out the code snippet here: http://codepen.io/anon/pen/FrTcoP
HTML elements can be nested inside each other, allowing for customization of dropdown menus:
<ul class="custom-dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Another option</li>
<li><input type="text" placeholder="Enter text here"></li>
</ul>
You can enhance the dropdown menu by adding an input field with <input type="text">.
If you want to achieve a dropdown menu without using bootstrap, you'll need to create your own custom CSS styles for a list element. One method to accomplish this can be found at
Once you have implemented a custom dropdown menu using CSS, you are free to include any content within it as needed.
For anyone looking to create a sleek dropdown menu using only CSS3, I have put together a demo with an added input feature. Below is the code snippet that you can use to achieve this effect:
/* Hide Dropdown by Default */
nav ul ul {
display: none;
}
/* Show Dropdown on Hover */
nav ul li:hover > ul {
display: block;
}
ul li{
display: inline-block;
}
ul li a {
padding: 20px;
}
ul li a:hover{
text-decoration: none;
}
nav ul ul {
background: #222222;
border-radius: 0px;
position: absolute;
}
nav ul ul li{
padding: 15px 0;
}
nav ul ul li a{
color: #fff;
opacity: .5;
}
nav ul ul li a:hover{
color: #fff;
opacity: 1;
}
If you want to see the CSS3 Dropdown Menu in action, check out the DEMO.
Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...
I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...
I'm currently exploring ways to prevent the clipboard events from copying text when the onCopy event is triggered. I've tried using the onCopy handler and e.preventDefault() method, but the text is still being copied without any issues. What am I ...
I am having an issue displaying data in a jQuery DataTable with a column level filter at the top, fixed height, and scroller enabled. Initially, I was able to display the column level filter at the top and it was functioning properly. However, when I set t ...
I am looking to create the following HTML structure: <div id="my-grid" class="isotope"> <div class="myProject-item">....</div> <div class="myProject-item">....</div> <div class="myProject-item">....</div> ...
On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names. Currently, this is how it appears: https://i.stack.imgur. ...
I am having some difficulties with using bootstrap switch. I have tried the examples provided on , but regardless of the classes I apply, the buttons remain the same small size and the text for ON and OFF is barely visible. I can't seem to figure out ...
Here is the object passed to the view: app.get('/view_add_requests', isLoggedIn, function (req, res) { var my_id = req.user._id; // this is the senders id & id of logged in user FriendReq.find({to_id: my_id}).populate('prof ...
In the directory /plugin/vue-chartkick, I created a vuechartkick plugin. import Vue from 'vue' import Chartkick from 'vue-chartkick' import Chart from 'chart.js' Vue.use(Chartkick.use(Chart)) This is the nuxt template sectio ...
I have recently started learning React and I am currently working on converting a functional component into a class component. However, I encountered an error message that says: Error: Invalid hook call. Hooks can only be called inside of the body of a fu ...
In my MEAN stack application, I started with Sails.js. Everything was working smoothly during development, especially with angular-animate. However, once I changed the Sails environment to production, I encountered issues. Grunt is set up to concatenate a ...
I'm currently facing an issue with mapping a data array onto material-ui Typography elements. Here's the code snippet: { array.map((item, id)=> <Typography key={id} value={item.name} />) } While this code successfully displays the val ...
After refreshing the page (e.g., by pressing F5), I noticed that the data in my service gets cleared. Is there a way to prevent this issue without using local storage? It's not a critical feature, but it does disrupt the application flow when users re ...
I need help with uploading an image using node.js, express, and multiparty. My code is as follows: HTML <!DOCTYPE html> <html> <body> <form method="post" action="/img"> Select image to upload: <input type="file" name= ...
I need help with a template: <mat-card *ngFor="let cargo of cargos" class="cont-mat"> ... <mat-checkbox *ngFor="let truck of (retrievingTrucksByUserIdAndRules(cargo.id) | async)" formControlName="truckId" ...
I am encountering a unique issue with IE11 and ajax. Most of the time, everything works as expected when I use the code below for my requests. However, I have noticed that when I try to use it in combination with a copy and paste function, an 'Access ...
My code is functioning properly, but I would like to enhance it by adding an option for users to view the password they are typing. Is there a way to implement this feature? const [email, setEmail] = useState(''); const [password, setPassword] = ...
I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...
In my application, I am using the Vuetify autocomplete component. This component allows for the use of a custom filter to filter input data. Below is an example of a custom filter for the autocomplete: customFilter (item, queryText, itemText) { const ...
I have been utilizing the anychart JavaScript library to generate a pie-chart from my data, which is dynamically pulled whenever a user modifies a dropdown selection. Below is the code snippet I am employing for this purpose: var stage = anychart.graph ...