I have this piece of CSS code that appears on all other browsers that I have tested including Firefox and Chrome but for some reason, they do not appear in the Safari browser. What am I doing wrong?
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 45%;
background-color: #3a5cd7;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
div {
padding: 70px 0;
text-align: center;
}
It seems that you have to use another version of your code for safari or firefox.
Example for type=number in firefox :
input[type=number] {
}
Example for type=number in safari :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
}
I find this here:
Numeric Inputs – A Comparison of Browser Defaults
You just have to look for the rest of the inputs
Related
I'm trying to make a custom sized text area in HTML, but it doesn't seem to be working. I set it inside a class so it would I could set CSS element to it, but it doesn't seem to work.
.textareas {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<div class="textareas"><textarea></textarea></div>
It seems to create the box I make, but the actual textarea remains unchanged and is still small and stuck as the default one.
Check below code
.textareas {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<div><textarea class="textareas"></textarea></div>
I was able to fix the issue after reviewing some other examples. I removed the class entirely and gave the textarea an ID so it can be called in CSS
HTML:
<textarea id="text"></textarea>
CSS:
textarea#text{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
I have created a form and set focus to none but I am still getting the green box to appear and stay around each form field when I am testing.
Here is the form: https://secureforms.nextens.nl/TEMPLATE
I have already tried using:
*:focus {
outline: none;
}
AND
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
But for some reason, this still isn't working. Below is the CSS that I am using to style the form.
input[type=text], select {
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form select
{
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form radio
{
font-size:15px;
width: 100%;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
input[type=submit] {
width: 100%;
background-color: #337ab7;
color: white;
margin-top: 8px;
margin-bottom: 8px;
border: none;
border-radius: 0px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #337ab7;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
I just want the green highlighting around the form fields not to show up.
add this in your css
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active,
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {
outline: 0;
}
You have this CSS in your template, you gotta remove it to get what you want
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
outline: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
outline: 1px solid #CC0000;
}
According to Dev-Tools, it is line 7 of your CSS that is causing the issue:
.LV_valid_field, ...
I have created a file upload with search button at the right side. This one is showing correctly in chrome only, but I need this to support all modern browsers. I have tried in Mozilla where this is not being supported. Can anybody please help me to solve this. Thank You.
#import url(https://fonts.googleapis.com/css?family=Roboto);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 16px
}
body {
background-color: #fff;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
.container {
margin: 20px auto;
max-width: 1140px;
padding: 25px 25px;
border: 1px solid #000;
}
.row {
clear: both;
}
#myInput {
width: 85%;
border: 1px solid #000;
display: inline-block;
}
input[type=file]::-webkit-file-upload-button {
width: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
border: none;
border: 0px;
}
x::-webkit-file-upload-button,
input[type=file]:after {
-webkit-appearance: button;
border-collapse: separate;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
content: 'Search';
color: #080708;
background: #e3e3e3;
text-decoration: none;
display: inline-block;
left: 100%;
margin-left: 50px;
position: relative;
padding: 10px 46px 10px 40px;
}
#media only screen and (max-width: 767px) {
.container {
width: 100%;
padding: 15px;
}
#myInput {
width: 64%;
}
.btn-View {
width: 10%;
}
table td {
padding: 12px;
}
}
<div class="container">
<div class="row">
<input type="file" name="myInput" id="myInput">
</div>
</div>
You can make it work in many ways.
The simple way if you do not need the file name to be seen, using
the input file along with the label is the quickest way.
https://codepen.io/anupkumarmaharjan/pen/mWXbVj
Using the javascript can be handy. Go through these links for better understandings.
https://codepen.io/anupkumarmaharjan/pen/NpyKPm
https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way
I have been working a mobile version of my site. All seems to work perfectly fine on opera mobile and chrome mobile, until I checked my page in Firefox mobile. Firefox zooms in my page that it looks awful. I don't know if it's CSS issue or this is how Firefox mobile renders pages. I've checked some other mobile version of famous sites and it worked perfectly fine on firefox. I badly need help with this one. Screenshot below:
Chrome
Firefox
categories is the select input
searchinput is the text input
CSS code:
#categories{
width: 95%;
padding: 50px;
font-size: 110%;
outline: 0;
color: #777;
-webkit-appearance: none;
-moz-appearance: none;
border: solid 5px #cacaca;
border-radius: 20px;
margin: 30px 0 10px 0;
background-color: #fff;
background-image: url(http://baligia.com/img/selectdown.png);
background-position: 96% 50%;
background-repeat: no-repeat;
background-size: 50px;
-moz-appearance: none;
}
#searchinput{
border: solid 5px #cacaca;
border-radius: 20px;
background: #fff;
color: #42454e;
padding: 6px 8px;
width: 95%;
outline: none;
font-size: 110%;
text-align: left;
padding: 50px 130px 50px 50px;
margin: 0 0 30px 0;
}
Try
#categories, #searchinput {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I am implementing a search box for a html-javascript based app using Chrome:
fiddle
it should look like this:
but when I deploy app on iphone,
screen looks like this:
I know it's difference with webkit, I thought using safari to debug it would be a solution, however,when I use safari to open it, it looks like this:
Just don't know why on iPhone, it looks like that. How to improve it to the feature which I need?
Here is the html:
<div class="form-wrapper">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</div>
CSS:
.form-wrapper {
height: 80px;
background: #555;
color: #FFF;
clear: both;
}
.form-wrapper input {
background-color: #FFF;
-moz-box-sizing: border-box;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
.form-wrapper button {
overflow: visible;
position: absolute;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
color: #FFF;
text-transform: uppercase;
background: red;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: 20px -116px;
}
.form-wrapper button:before {
content:'';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent red transparent;
top: 12px;
left: -6px;
}
type="search" causes the field to have a -webkit-appearance: searchfield on Safari, which causes lots of your styles to be ignored.
Have either a none appearance or textfield appearance.
Here is a fiddle with none, which seems to work for me on Safari 6/OSX (no iDevice available to test).