Cannot set white background to HTML input in Mozilla - html

A strange behavior prevents me from setting white color for an HTML input element's background color (background property) in Mozilla Firefox (it switches to a yellow color). Other colors works fine (black, green). Does anybody know why?
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: white;
color: #9B9B9B;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>
EDIT: Since it turned out the problem is caused by Mozilla's autocomplete, it's not a problem anymore since in normal use it changes the background as expected.

In your example the background in perfectly white. I think, there is some other code, that affects your input. Try to make it more specific using the ID #username.
Or, you can use !important rule.
UPDATED
Added the third way. It may be an autocomplete background of browther. Try the code below.
input#username {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: #fff !important;
color: #9B9B9B;
}
input#username:-moz-autofill,
input#username:-moz-autofill-preview,
input#username:-webkit-autofill {
filter: none;
background: #fff !important;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>

UPDATE
the code listed bellow is not necessary as mentioned in the comments. however refreshing cache helped as the problem came of autocomplete.
OLD
Use background-color: white; and not Background: white;
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background-color: white;
color: #9B9B9B;
}

Related

Remove on one specific input its outline and keep only the border

I tried to use "outline: 0", but this doesn't change a thing.
#input_field {
outline: 0;
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}
<div id="input_field">
<input type="text" name="q" size="50">
</div>
I still need outline for other inputs.
UPDATED:
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}
Since i don't want others to be updated, here is a .css regarding the others. The outline should only apply on the #input_field.
Thank you in advance!
You can do something like this:
fiddle to playaround.
#input_field {
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}
.OutlineNotNeeded {
border: none;
}
.OutlineNotNeeded:focus {
outline: 0;
}
<div id="input_field">
<input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>
You need to remove the outline on the input on focus.
#input_field > input:focus {
outline:none;
}
To remove the border too (which can trick you because it looks the same as an outline and will always stay there even on focus unless you remove it) you can add:
#input_field > input {
border:none;
}
If your trying to see a border only when focusing you can go:
#input_field > input {
border:none;
}
#input_field > input:focus {
border:1px solid #000;
}
you just need to place a different class or id for the input tag for the outline to be focus/not focus. focus state is an action taken when the input is click.
input.showoutline:focus{
outline: color type size;
}
input.hideoutline:focus{
outline: 0;
}
<input class="showoutline"/>
<input class="hideoutline"/>

CSS - Form not scaling down on mobile

New coder here. I have a form that is scaled exactly how I want on web, but looks horrible on mobile. The form isn't scaling down. I would like the form to scale down based on a mobile devices width. Any thoughts or suggestions would be much appreciated. I have included the HTML and CSS I have below. Thank you! Also, I would prefer to do this in CSS.
HTML:
<div class="contactForm">
<form id="form" class="topBefore" method="POST" action="#">
<input id="name" type="text" name="name" placeholder="NAME">
<input id="phone" type="tel" name="phone" placeholder="PHONE">
<input id="email" type="email" name="email" placeholder="E-
MAIL">
<textarea id="messagebody" type="text" name="message"
placeholder="MESSAGE"></textarea>
<input id="submit" type="submit" name="send" value="SEND">
</form>
</div>
CSS:
.contactForm {
background-color: #FAFAFA;
width: 100%;
margin: 0 auto;
}
#form {
position: relative;
width: 500px;
margin: 0 auto;
padding-bottom: 20px;
}
input {
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;
background: transparent;
outline: none;
font-size: 14px;
color: black;
border: solid 2px #dddddd;
border-bottom: none;
letter-spacing: 2px;
background-color: white;
}
input:hover {
background: #f4f4f4;
font-size: 14px;
color: black;
letter-spacing: 2px;
border-color: #e5e5e5;
}
textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;
letter-spacing: 2px;
background: transparent;
outline: none;
font-size: 14px;
color: #333;
background-color: white;
border: solid 1px #dddddd;
border: solid 2px #dddddd;
}
textarea:hover {
background: #f4f4f4;
color: black;
}
#submit {
width: 504px;
padding: 0;
margin: -6px 0px 0px 0px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #333;
outline:none;
cursor: pointer;
border-top: none;
letter-spacing: 3px;
border: solid 2px #dddddd;
}
#submit:hover {
background-color: #7fbf7f;
color: black;
letter-spacing: 3px;
font-size: 15px;
border-color: #7fbf7f;
}
Try using media queries:
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
Example:
#media screen and (max-width: 699px) and (min-width: 520px)
Put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
For more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Also: https://css-tricks.com/snippets/html/responsive-meta-tag/
Use mobile query: allows specified CSS to be applied depending on the device https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
You can use this common device breakpoints.

Why box-sizing doesn't work for radio buttons?

I tried to make a custom radio button, but I can't understand why box-sizing doesn't work.
Chrome:
FireFox:
What am I missing?
HTML:
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
CSS:
.radio-btn {
appearance: none;
box-sizing: border-box;
width: 0;
height: 0;
border-radius: 50%;
border: 6px solid #fff;
box-shadow: 0 0 0 2px #000;
transition: .2s border-color;
cursor: pointer;
}
.radio-btn:checked {
width: 12px;
height: 12px;
border: 3px solid #000;
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:hover {
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:focus {
outline: 0;
}
http://jsfiddle.net/u86xboqd/
You set your width and height in your .radio-btn css to 0. If you set each to 12px (to match your other styles) I think it will look the way you want it to.
.radio-btn {
width: 12px;
height: 12px;
}
Hard to determine without seeing code (not everyone can access codepen) but it may be because you also need to set display on the element to a block calculable value (so it respects height/width), e.g:
input{
display:inline-block;
}
You may also wish to check the relevant compatability

how to achieve following using css ( digits input )

I am trying to achieve following feature:
It's an input box, has 4 digits, once clicked, user can input 4 digits.
It's part of a mobile app.
Currently what I have achieved is : example, note that for some reason,
outline: none; works fine in my app but not work in this jsFiddle example.
My question is how to draw the 3 separation bar and also display those digits
just fit their position within it?
Is it achievable using css?
below are code:
<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">
<div data-role="fieldcontain">
<span>
<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">
</span>
</div>
<input type="submit" class="submitHidden">
</form>
css:
.ui-corner-all-input {
-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
margin-top: 24px;
}
.ui-shadow-around {
-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
border: 1px #b6b6b6 solid;
}
*:not(input):not(textarea) {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
FORM[data-enhance="false"] INPUT, textarea {
outline: none;
}
FORM[data-enhance="false"] SPAN {
overflow: hidden;
display: block;
padding: 0 10px 0 0px;
text-align: left;
}
.submitHidden {
visiblity: hidden;
position: absolute;
opacity: 0;
}
Here is my take on the problem.
It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.
.input-widget {
vertical-align: top;
margin-left: 1rem;
font-size: 2rem;
display: inline-block;
position: relative;
}
.input-widget .input {
width: 8rem;
font-size: inherit;
font-family: inherit;
letter-spacing: 5px;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-widget .digit-background {
position: absolute;
top: 1px;
left: 0;
z-index: -1;
}
.input-widget .digit-background .digit {
display: inline-block;
float: left;
}
.input-widget .digit-background .digit::before {
content: '0';
color: lightgray;
background-color: currentColor;
display: inline-block;
padding: 1px;
margin: -1px 4px 0 -1px;
}
<div class="input-widget">
<input type="number" max="9999" class="input" value="01234">
<div class="digit-background">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>
And a SCSS version is here: https://jsfiddle.net/cburgmer/0xgtdyLj/1/
You could do it like this:
HTML:
<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
CSS:
.clock {
color:darkgray;
border-style:none;
width:40px;
height:60px;
font-size:60px;
}
td{
border:2px solid darkgray
}
table {
border-collapse:collapse;
}
JavaScript:
function next(next) {
document.getElementById(next).focus();
}
Link: http://jsbin.com/uhaHunuq/1/edit?html,output
Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.

CSS form doesn't appear to have any line breaks

I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle