I recently encountered an issue with a custom input I created in a JavaScript file for an application built on Phonegap. The border of the input was not displaying correctly on Android devices compared to regular inputs.
https://i.sstatic.net/PmSmI.png
My question is, how can I use CSS to create a customized border that mimics the exact appearance of default inputs on Android devices for my custom inputs?
Here is a solution you can use:
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
}
.rawp{
position: relative;
display: inline-block;
}
.rawp:after {
content: "";
background: black;
width: 1px;
height: 10px;
left: 0;
bottom: 0;
z-index: 99;
position: absolute;
}
.rawp:before {
content: "";
background: black;
width: 1px;
height: 10px;
right: 0;
bottom: 0;
z-index: 99;
position: absolute;
}<div class="rawp">
<input></input>
</div>To accomplish this task, the use of an outline and border combination is recommended. A larger outline should be used on the left and right sides, extending just as far as needed to match the size of the tray shape. Essentially, a transparent outline serves as a mask to achieve the desired shape.
In my approach, I opted for a green outline and a red border to enhance clarity.
https://i.sstatic.net/WY1Ho.png
The final css code appears like this:
outline-width: 4px;
outline-style: solid;
outline-offset: -5px;
border-width: 0 0 5px;
border-style: solid;
outline-color: #fcfcfc;
border-color: rgba(153, 153, 153, 0.5);
If you have alternate methods to achieve a similar result, please feel free to share them with us.
My section has two columns centered in flexbox, but the container doesn't wrap around them as expected and instead fills the whole page. How can I make the section wrap around the text with a padding of 1rem? body { background-color: #444; col ...
Sample Scenario: While a user is entering information into a field, I would like to restrict the ability to delete or clear out the value, such as keeping "Friend" intact. Can this be accomplished using CSS or JavaScript? ...
Lately, I've been pondering on a question. A few years ago, I created a website using regular CSS and now I want to make some changes to the font sizes. While I know that CSS variables are the recommended solution for this situation, I'm curious ...
I need help figuring out how to align a table next to a form section. Here is the layout I am aiming for: #Form Label: |TextBox| Label: |TextBox| Label: |TextBox| Label: |TextBox| ---------------------------------------------- ...
Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...
After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...
How can I ensure that the image resizes correctly on smaller screens? Currently, the image spills over the container and there are gaps between the top/left of the container and the image. Should I adjust the image size in the media query or expand the con ...
I'm encountering an issue with my CSS3 carousel and 3D flipping. Whenever I navigate through the carousel and flip to the next slide, the first slide seems to automatically flip/flop after completing the rotation. You can see a visual demonstration o ...
I am struggling to display items in multiple columns without any strange formatting issues. Can someone help me out? Check out the JSBin for reference: http://jsbin.com/huzurejunu/1/edit?html,css,output https://i.sstatic.net/DxJpW.png <div class="ro ...
Here is the code for a card footer that I am having trouble with: <div class="card text-center"> <!-- CODE FOR card-header, card-body --> <div class="card-footer"> <div class="d-flex justify-content-center"> ...
One issue I'm facing is when attempting to optimize a section of my template for mobile devices in landscape mode. TS: window = window; Template: <div [ngStyle]="{'height': window.innerHeight < window.innerWidth ? window.screen ...
The issue I encountered with my Index was related to the positioning of the contents within the body tag. I was able to resolve it by adding the following code to my site.css: margin-top: 340px; Now, my index is displaying correctly! However, after apply ...
Why is my webpage not loading properly, even though it has the same HTML and CSS as my other functioning pages on the site? The page loads without the h1 element. If I comment out the span used for adding a transparent background image behind the whole we ...
I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...
I'm struggling to run the "audio", "base", and "common" modules of the Google Cardboard SDK on an x86_64 emulator for a new project, but I keep encountering this error message: 09-01 14:38:36.378 8768-8768/com.verbraeken.joost.roarenginedemo W/System ...
I'm currently working on a stacked bar chart in my CodePen project found here: https://codepen.io/a166617/pen/qBXvzQd However, I am facing an issue where the graph is not aligned properly with the x-axis and y-axis lines. The barchart seems to be sli ...
I am struggling to implement a change/animate feature for the background color. When I place the background script within the form submit event but outside the ajax call, I can briefly see the color change. However, once the remote content loads, the colo ...
While creating the .aab file, I'm looking to avoid including BUNDLE-METADATA\com.android.tools.build.obfuscation\proguard.map in the build process. Is there any way to achieve this? ...
After successfully loading an image from the SD card and displaying it in the imageView, my goal is to save the image location in either a database or a local variable. This way, the next time the application is launched, the image can be loaded from that ...
I'm struggling to apply styles to a deeply nested element using jQuery and JavaScript. I understand how to style nested elements, but I'm having trouble targeting a specific deeply nested element. My website is built on WordPress, and it has ins ...