I'm confused why my email button border is showing two colors instead of just one, even though I only set it to display one color

Upon examining the image above, it is clear that my email button border shows a mixture of grey and white colors when the border-color property is set to display as white. The code snippet below illustrates this:

.email {
  margin: 18px 0 0 0;
  margin-bottom: 12px;
}
.email .emailText {
  border-radius: 35px;
  -ms-border-radius: 35px;
  -moz-border-radius: 35px;
  -o-border-radius: 35px;
  -webkit-border-radius: 35px;
  background-clip: padding-box;
  outline: none;
  -ms-outline: none;
  -moz-outline: none;
  -o-outline: none;
  -webkit-outline: none;
  background: rgba(0, 113, 188, 0.4);
  border-color: white;
  color: white;
  font-size: 1.6em;
  font-weight: 300;
  height: 58px;
  padding: 0 0 0 30px;
  width: 61.7021276596%;
  /* 580px/940px */
}
.email :-ms-input-placeholder {
  color: white;
}
.email ::-mox-placehold {
  color: white;
}
.email ::-webkit-input-placeholder {
  color: white;
}
<div class="email">
   <form action="#" class="emailBox" target="_blank" method="post">
  <input type="email" class="emailText" placeholder="enter email for early access" size="">
   </form>
</div>

Answer №1

The issue you are facing is due to the default border implementation for input elements in browsers.

Typically, browsers will make the top border darker than the rest to create an inset effect on the input field. Even if you specify a color using border-color, it won't override the default border-style: inset. To fix this, you can set a solid border to ensure uniform color:

border-color: white;
border-style: solid;

Alternatively, you can achieve the same result with a simpler code:

border: solid white;

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

Is it possible to create clickable titles in highcharts that also interact with bootstrap popovers?

Hello, I'm trying to figure out how to turn the title in highcharts into a clickable link that works with bootstrap's popover feature. You can find an example of what I'm working on here: http://jsfiddle.net/287JP/4/ $(function () { ...

Utilizing Bootstrap to display side by side images at full height

Can someone help me achieve the layout shown in the image below? I want a container that spans full width and height with 2 images and other elements inside. The images should be full-height within the container, but also automatically adjust their width t ...

Image with a curvilinear embedded link

Can a round image be created with an alpha channel where a hyperlink surrounding it only recognizes the visible part of the image, excluding the transparent areas? If not possible, are there alternative methods to achieve this effect? ...

Guide on how to assign a value to a textbox according to the selected option from a dropdown menu

I need a feature where, depending on the selection made in a dropdown menu, data should be automatically filled into the next input field. For instance, if the options in the dropdown menu are NETWORK1, NETWORK2, NETWORK3, selecting NETWORK1 should popula ...

What is causing the color property to not accept CSS gradients?

Is there a way to create text with a gradient color effect? I've noticed that gradients don't work on the color property. Is there another method to achieve text with gradient colors? ...

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

The drop-down menu remains in the open position following a responsive test

Seeking assistance with a minor issue... I've incorporated a jQuery mobile menu into my responsive web design. When testing the responsiveness by adjusting the browser window size, everything seems to be working correctly. However, upon resizing it b ...

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

Tips for incorporating AngularJS into a .php file when displaying a Laravel view

I am completely new to working with laravel and AngularJS. Currently, I am facing an issue where I am trying to display a view that is a php file. Although the .php file is successfully displayed, the AngularJS expression within it is not being interpreted ...

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...

I'm using Selenium XPATH or CSS to identify and select a checkbox within an HTML table based on the specified text. As a result, I have successfully

I am trying to select a checkbox from an HTML table with multiple columns. Specifically, I want to choose the checkbox that corresponds to the "CLEAN_AUDIT" option for the Name column. However, my current XPATH is selecting 4 checkboxes labeled CLEAN_AUDIT ...

What causes the unexpected outcome when applying theme overrides in Mui V5?

I am looking to adjust the border radius of all input fields in my project. Specifically, I would like the TextField component to have a border radius of https://i.stack.imgur.com/ULEGj.png instead of https://i.stack.imgur.com/NWmUe.png. According to the M ...

Once the PHP page loads, it becomes challenging for me to dynamically change values in JavaScript

Within my code snippet below, I am aiming to modify the initial value using a slider. The slider appears to be functioning correctly; however, it is not updating the values of timeout as indicated beneath the line $('ul.<?php echo $this->session ...

An error has occurred and the image is unable to be viewed on

I recently set up a local web server on my Windows 10 desktop PC and encountered an issue where the text on my webpage is displaying correctly, but the images are not showing up. To view the website, I am using this link Both index.asp and btnCancel.gif ...

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: https://i.sstatic.net/5c0mX.png Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where t ...

WebGL annotations failing to display on the webpage

I'm currently working on displaying a 3D model using Three.js in a web browser and looking to incorporate annotations like the ones shown in this Sketchfab model: Interactive 3D Test. I came across a helpful guide at this link, but I'm facing iss ...

The styling appears to be displaying differently on the website compared to how it looks on Bootply

Hey there! I recently created some pages on Bootply.com and attempted to transfer them to the website I'm building in Visual Studios. However, the styling ends up looking off and doesn't match how it appears on Bootply.com. Check out these pictur ...

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

Overflowing multiple divs in CSS

I have a unique situation where I have 10 divs aligned in a row within one container located in the footer of a responsive website. The website is designed to be functional on smartphones as well. My goal is to create a horizontal scrollview specifically ...

How to incorporate multiple fonts into spark RichText using CSS - Flex edition!

I'm currently facing a challenge with embedding multiple fonts in a spark RichText component. Specifically, I am unsure about how to proceed with displaying bold font using <b> tags in HTML. The font I am working with has separate regular and bo ...