PhoneGap Android: Strange behavior with input color and focus (demonstrated with visuals!)

I'm encountering two issues with the input box in my PhoneGap HTML5 CSS3 application.

1) Whenever I select or focus on the input, the background color changes to white and the text color becomes black. Have I overlooked a specific CSS property for this?

2) Another problem arises when I select or focus on the input field on my Android device and the keyboard pops up for text input. After typing and pressing "Done" on the keyboard, it disappears but the input field remains selected or focused. Is this a bug?

The code snippet I am using is as follows:

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
    input, input:focus {
        background:lime;
    }   
</style>

</head>
<body>
    <input type="text" />
</body>
</html>

Here are two screenshots depicting the same issue in ANOTHER app:

Issue 1)

Issue 2)

Answer №1

It seems like the problem lies in the fact that your input field's color is being affected by properties and colors inherited from earlier parts of your code. Interestingly, the color of the DIV itself remains unchanged.

If you wish to prevent the input field from changing colors when focused, you can try implementing the following CSS snippet:

input.txtSearchField:focus {
    background:#7AC9F0;
}

This will ensure that the input field matches the color of the DIV positioned behind it.

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

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...

Using jQuery to animate a div element with CSS3

After creating a loader using CSS3 and CSS3 Animations, I am looking to implement the actual loading function with jQuery based on a specified duration. For instance, setting it to load fully in 30 seconds. This is what I currently have: < ...

Exploring the main parameter array in the response from a ksoap2 request on an Android device

Utilizing the ksoap2 webservice in my android application has resulted in receiving the following Response from the server: validateUserResponse{return=anyType{authenticated=true; contactNumber=9856456589; ***currentAssignedVillagesName=Vavol; currentAss ...

What is the best way to split a text box into sections, making sure that each section can only contain a single

My task is to develop a registration form One of the requirements is to design a textbox that can be divided into multiple sections, each allowing only one character input as shown in the image. I am unsure how to accomplish this division while still bei ...

Steps to import an excel file by clicking a button in an Angular application

Our project requires displaying an Excel file when a menu button is clicked. https://i.sstatic.net/9tas1.png When a new tab is opened, I would like to showcase the Excel file that is saved on my personal computer. The format of the Excel file should resem ...

How can I transfer the height of a parent div to a child div with absolute positioning?

I'm facing an issue where the child div (.timeline) needs to adjust its height as the parent divs (.tea-history) height increases. However, using height:inherit; didn't work as expected because the child div inherited an auto height from the pare ...

Customize the default tooltip for a React JS button using CSS to hide the HTML title

I have a collection of buttons that I want to either disable or hide the default tooltip generated by the title attribute in the <Button title='test'></Button> element. I have come across suggestions to use CSS pointer-events to disa ...

form field with the ability to select multiple files

From my understanding, traditional html or javascript do not have the capability to upload multiple files (images) in a singular field. Please correct me if I am mistaken. Is there a way for this to be achieved with html5 or any other method aside from us ...

What is the best way to create a scrollable horizontal element using bootstrap?

Here is the specific issue I'm facing: https://i.sstatic.net/oi94N.png The problem is that the icons are wrapping onto 2 lines, which is not the desired outcome. This is what I currently have: <li class="list-group-item participants-grouping-li" ...

Retrieving and filtering data from Firebase Database using advanced queries in Android Studio

I have a Firebase Realtime Database set up with the following structure: https://i.sstatic.net/RdrzH.jpg My goal is to implement filters that allow me to retrieve nodes that meet specific criteria, such as costing between $100 and $400, located within 60 ...

When the IF condition in HTML is used in conjunction with Java code, it is causing all HTML code to be ignored and

Everything works perfectly if "sh" has a value (such as "Day" or "Night"), but when it is empty or null, it triggers a null condition and skips all the code on my HTML page, leading the control to the end of the HTML file. Question: I have tried using els ...

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

Styling with CSS using the em unit to make an image half the size of its parent div element

I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

I believe the term for this is an inline text alignment: center, but for some reason, I am unable to make it function properly within

Can anyone help me align the "Sizes" section in the center? I've tried everything but can't seem to get it right. Any tips on what and where to insert in the code? Thanks! <form action="https://www.paypal.com/cgi-bin/webscr" method="post" ta ...

Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy wa ...

The process of inserting data into Firebase's realtime database seems to never end

I have encountered a problem while trying to insert data into Firebase. After checking for matching values and inserting my data, the main UI thread halts and causes an infinite loop of insertions in the real-time database. Below is the code snippet causi ...

How can a DrawerLayout with NavigationView be implemented without using an ActionBar?

After successfully setting up a DrawerLayout with NavigationView, I am now looking to create a layout similar to the image below: https://i.sstatic.net/8e9dn.pnghttps://i.sstatic.net/fqmwu.png However, my attempts to set a transparent background color to ...

"Disappearing act: Navigating through pages causes the navigation

Struggling with navigation in my asp.net core web app development. My directory structure includes the use of Areas. https://i.sstatic.net/DL6qe.png https://i.sstatic.net/GeEg9.png When navigating through pages in the main folder like Index, Index1, and ...

The issue of nested tabs in Bootstrap 3 causing problems with sliders within the main tab has

Hello, I am utilizing Bootstrap 3 tabs. Within the nav-tabs, there are three tab-panes: the first tab contains text only, the second tab includes a slider, and the third tab has nested tabs. However, I encountered an issue where the slider in the nested t ...