I'm a beginner in CSS and I need to create a text box like this:
https://i.sstatic.net/4HQ4n.png
My supervisor asked for a shadow effect around the box when clicked. How can I accomplish this?
Any assistance would be greatly appreciated.
I'm a beginner in CSS and I need to create a text box like this:
https://i.sstatic.net/4HQ4n.png
My supervisor asked for a shadow effect around the box when clicked. How can I accomplish this?
Any assistance would be greatly appreciated.
You have the option to apply styles to an element when it is in focus using the :focus pseudo selector.
.input-field:focus{
box-shadow: 3px 3px 4px rgba(0,0,0,.5);
}<input class="input-field" />To create a text box, you can use the <input> HTML element.
<input type="text" name="Business Name">
Your browser will automatically display a shadow effect with the highlight color specified by your computer settings.
The input element offers various attributes and input types which are detailed in the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input.
If you prefer to have the label "Business Name" appear above your text box, it's recommended to use a label element:
<label for="business-name">Business Name</label>
<input type="text" id="business-name">
Ensure that the 'for' attribute of the label matches the 'id' attribute of the input element to establish the connection between them.
To create a similar effect, you can utilize the :focus pseudo-class along with the box-shadow attribute in CSS. Below is an example of how you can achieve this:
input:focus {
box-shadow: 0 0 5px #acdfea;
}<input class="input" />You can adjust the color and spread of the shadow to suit your needs.
For more information on the :focus pseudo-class, refer to the following link:
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...
Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...
The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...
Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...
Can anyone assist me with implementing a "show more" and "show less" feature for a specific div? I have put together a DEMO on codepen.io In the DEMO, there are 8 red-framed div elements. I am looking to display a "show more" link if the total number of ...
Pressing enter in a textarea with the nowrap whitespace attribute set through CSS does not create a new line in IE8. Instead, just a simple whitespace appears. Other browsers like Opera, Chrome, and Firefox do not have this issue. Any solutions for this pr ...
I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...
Is there a way to make it so that only the "pastInvestments" are displayed when the "pastButton" is clicked, and only the "currentInvestments" are displayed when the "currentButton" is clicked? In the HTML code below, there are 2 buttons and 2 divs: < ...
For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...
Check out my website at kylesethgray.com. I've created a 'somewhat responsive design', but there are two issues that need fixing: Whenever I have a list, whether it's an <ul> or <ol>, the bullets get cut off when the bro ...
I have designed a form using bootstrap 5 with 1 row containing 4 columns (1 dropdown menu and 3 buttons). While it looks fine on my desktop, the problem arises when I view the page on a mobile device. The buttons shrink and remain on the same row instead o ...
I have three different pages: register.php, view.php, and edit.php In the edit.php page, I am trying to maintain a dropdown option that defaults to the first option available. Here is a breakdown of my pages: REGISTER.PHP <form id="base" method="po ...
When using JQuery Ajax to call sessions variables from a PHP steamauth file, I encountered an issue. Even though the code works fine when "$data['test'] = "ok";" is used instead of "$data['test'] = $_SESSION['steamid'];", ther ...
Is it possible to automatically redirect users to a new page at a specific time? I would like visitors to be redirected to a new site starting from 12:00AM on December 31st, without allowing them to access the current site after that time. Is there a way ...
Issue with dropdown links not aligning properly in the Bootstrap navbar. The positioning seems off and can be seen in the screenshot provided where the blue outline represents the ".dropdown" https://i.stack.imgur.com/QmG7v.png Facing a similar problem a ...
javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...
I am working on a modal in the app.html file of my Nuxt project that prompts Internet Explorer users to switch to another browser. The modal includes links to three different browsers for download. Although the modal is displaying correctly, I keep encount ...
I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...
I am using a setTimeout function to reload another function every 5 seconds. The update_list function is responsible for rendering entrances in a view. However, when there are many entrances and you have scrolled down, the list empties and reloads every e ...
I am facing a challenge with arranging three columns in a row: Interested listings | Basic profile | Connections However, when the screen size is reduced to that of a phone, they should be stacked like this: Basic profile Interested listings ...