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
Related
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
I'm having a problem with margin in the input with width 100%, because it is overlapping the div container.
I looked for solutions on the forum, and the possible solution was to apply box-sizing: border-box, but it is not working.
Solution not working to me: CSS - Input at 100% width overlaps div
jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body, pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
}
.container_calculator > label {
display: inline-block;
color: #fff;
margin: 10px 0 0 20px;
}
.container_calculator > input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 20px;
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
enter image description here
instead margin on the children, you may use padding on the parent , so it can be included in box-sizing
as specified in the linked answer you said did not work for you , see below the link to specification of box-sizing to understand how it works and how to use it
possible example: https://jsfiddle.net/gr7cbevj/
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body,
pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
padding: 0 20px;/* added */
box-sizing: border-box;/* added */
}
.container_calculator>label {
display: inline-block;
color: #fff;
margin: 10px 0 0 0px;/* modified */
}
.container_calculator>input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 0px;/* modified */
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
see the use of box-sizing .
The box-sizing CSS property sets how the total width and height of an element is calculated.
You are adding 20px to the margin.
change your css for this element:
PREVIOUS:
.container_calculator > input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 20px;
}
NEW:
.container_calculator input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
margin: 5px 0px;
}
Just insert padding to parent and remove margin in input and label.
.container_calculator {
padding: 5px 20px;<-------------insert this line
//Other codes...
}
.container_calculator > input {
margin: 5px 20px;<--------------remove this
//Other codes...
}
.container_calculator>label {
margin: 10px 0 0 20px;<---------remove this
//Other codes...
}
For space between input and label,you can use of :
.container_calculator>input{
margin-top:5px;
//Other codes...
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body,
pre {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.container_calculator {
width: 100%;
max-width: 400px;
background-color: tomato;
border-radius: 5px;
margin: 5px auto;
padding: 5px 20px;
}
.container_calculator>label {
display: inline-block;
color: #fff;
}
.container_calculator>input {
height: 20px;
border: 1px solid tomato;
border-radius: 5px;
width: 100%;
}
div.result_bin2dec {
border: 1px solid #edf2f7;
background-color: #edf2f7;
border-radius: 10px;
margin-top: 30px;
height: 35px;
}
<div class="container">
<div class="container_calculator">
<label>Number</label>
<input type="text" id="number">
</div>
<div class="result_bin2dec">
<pre>
Dec: 10
Bin: 01
</pre>
</div>
</div>
I have the following HTML to place a button inside an input (JSFiffle Example):
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
margin-right: -80px;
padding: 12px;
vertical-align: middle;
width: 100%;
}
button {
background-color: white;
border: none;
cursor: pointer;
display: inline-block;
font-size: 28px;
line-height: 1;
margin: 0;
outline: 0;
vertical-align: middle;
}
i {
display: block;
line-height: 1;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<form>
<input type="text">
<button><i class="fa fa-search"></i></button>
</form>
Problem
The JSFiddle Example I posted works great ...
But in my application when the negative margin right value is bigger then the icon width the input moves right and gets outside of the container with a space on the left:
I am not able to replicate this on JSFiddle but I wonder if someone has any idea what to look for because I have been trying everything and not able to solve it.
I'd suggest something more along these lines:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
.search-input {
display: flex;
flex-flow: row nowrap;
height: 40px;
border: 1px solid red;
background-color: white;
font-size: 18px;
line-height: 1;
}
.search-field {
flex: auto;
border: none;
padding: 10px;
}
.search-button {
width: 40px;
height: 40px;
font-size: 24px;
cursor: pointer;
border: none;
background: transparent;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
<div class="search-input">
<input class="search-field" type="text">
<button class="search-button" type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
Since you said you didn't want a flex solution, how about removing the negative margin-right and replacing width: 100% with width: 88%.
That being said and since I'm a big fan of flexbox, the following is a different flex solution from James' offering:
form {
border: 1px solid green;
max-width: 400px;
display: flex; /* Added */
justify-content: flex-end; /* Added */
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
/* margin-right: -80px; */ /* Removed */
padding: 12px;
vertical-align: middle;
/* width: 100% */ /* Removed */
flex: 0 1 100%; /* Added */
}
You can make the input's container position: relative and the button position: absolute. Then you can move the button wherever you want relative to the container. I would suggest using something other than the form element, so that you can have more than one element in the form. I've added a simple wrapping div.
Then you set right to a little more than 0 so that the border(s) can be seen, and the top to half way down, less half the height of the button so it's centered vertically.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
.search {
/* Making the container relative... */
position: relative;
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
padding: 12px;
vertical-align: middle;
width: 100%;
}
button {
background-color: white;
border: none;
cursor: pointer;
display: inline-block;
font-size: 28px;
line-height: 1;
margin: 0;
outline: 0;
vertical-align: middle;
/* means you can absolutely position the button relative to that */
position: absolute;
/* make it one pixel off the right for the border */
right: 1px;
/* make it 50% - half its height to center it vertically */
top: calc(50% - 14px);
}
i {
display: block;
line-height: 1;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<form>
<div class="search">
<input type="text">
<button><i class="fa fa-search"></i></button>
</div>
</form>
I have different results for different browsers in the following code:
.flexsearch--wrapper {
height: auto;
width: 50%;
max-width: 700px;
min-width: 100px;
top: 20px;
overflow: hidden;
background: transparent;
margin: 1px;
position: absolute;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--form {
padding: 0 66px 0 0;
/* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
.flexsearch {
padding: 0 25px 0 200px;
/* Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 30px;
padding: 0 46px 0 10px;
border-color: #888;
border-radius: 3px;
/* (height/2) + border-width */
border-style: solid;
border-width: 2px;
/*margin-top: 10px;*/
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 32px;
height: 32px;
padding: 0;
border: none;
margin-top: 4px;
/* margin-top + border-width */
margin-right: 5px;
/* border-width */
background: transparent;
color: #888;
font-family: 'Helvetica', sans-serif;
font-size: 30px;
line-height: 30px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
/* UPLOAD ICON IMAGE */
#uploadIcon {
/*width: 10%;
height: 100%;*/
padding-top: 10px;
min-width: 80px;
max-width: 80px;
position: absolute;
margin: 0 1% 0 77%;
/* left : 77%;*/
top: -3px;
}
/* SIGN UP / SIGN IN*/
.Signin {
position: fixed;
/*left: 85%;*/
margin-left: 86%;
top: 24px;
/*border : 1.5px solid grey;*/
padding: 3px;
margin-right: 2px;
float: right;
}
/*#Signup {
position: absolute;
left: 93%;
top: 20px;
border : 1.5px solid grey;
padding: 3px;
margin-right: 3px;
}
*/
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="search">
</div>
<input class="flexsearch--submit" type="submit" value="➜" />
</form>
</div>
</div>
<img src="upload_icon.png" id = "uploadIcon">
Sign In/Sign Up
<!-- Sign Up -->
The problem is that arrow and the Sign In and Sign Up with Firefox works perfectly :
But with Chrome or Safari it doesn't:
Is the problem from my code? or do I need to add some customized code for each browser. And if yes, how can that be done? Can it be done with -webkit or -moz Because I tried this, but it didn't work. Probably, I haven't written it well.
I have a header photo, and usually they are fairly easy to set up. However, for some reason which I cannot find, the header image floats over the elements of the HTML page.
Any help would be appreciated. I have tried looking for any margins/padding I forgot to delete, but there are none.
Picture of problem...
HTML pertaining to header image:
<div id="gallery">
<div id="imgContain">
<img src="pictures/clubhouse.jpg">
</div>
</div>
My CSS File: (not sure where the problem is, so I posted all of it...)
html, body
{
margin: 0;
padding: 0;
background-attachment: fixed;
background-image: url('.././pictures/04.jpg');
background-color: rgb(56,32,32);
}
#font-face
{
font-family: fancyFont;
src: url('fonts/fancy.otf');
}
#wrapper
{
min-width: 1000px;
margin: auto;
}
#content
{
background-color: white;
display: table;
border-radius: 5px;
bottom: 0px;
left: 0;
margin: auto;
right: 0;
top: 0;
width: 915px;
height: 100%;
box-shadow: 5px 5px 22px black;
}
#content p
{
padding: 25px;
font-family: Arial;
text-indent: 30px;
font-size: 1em;
word-wrap: break-word;
}
center
{
border-bottom: 1px solid black;
}
table
{
border: 1px solid black;
float: left;
}
.main-table /*Main table is the navigation table to the left...*/
{
background-color: white;
margin-bottom: 25px;
border: 4px double white;
width: 245px;
box-shadow: 0px 0px 10px black;
}
.main-table td
{
padding: 10px;
padding-left: 15px;
}
.main-table td a
{
text-decoration: none;
color: black;
font-family: Arial;
transition: .2s;
font-size: .9em;
padding-left: 20px;
}
.main-table td a:hover
{
border-bottom: 1px solid black;
color: black;
padding-left: 50px;
transition: .2s;
}
.main-table h1
{
font-family: fancyFont;
padding:10px;
color: black;
text-shadow: 2px 2px 1px white;
}
.division /*Division(s) are the small info boxes in the center.*/
{
margin-top: px;
margin-left: 40px;
border: none;
margin-bottom: 0px;
}
.division th
{
width: 250px;
background-color: white;
border-bottom: 3px double black;
padding: 10px;
font-family: fancyFont;
}
.division tr td
{
display: inline-block;
width: 250px;
height: 100px;
max-width: 250px;
}
#gallery
{
width: 100%;
height: 100px;
}
#gallery h1
{
font-family: fancyFont;
text-shadow: 2px 2px 1px #acacac;
}
#gallery img
{
width: 100%;
height: 450px;
border-bottom: 1px solid black;
}
table ul li
{
list-style: square;
font-family: Arial;
}
#imgContain
{
background-color: white;
width: 100%;
margin: 0;
padding: 0;
}
#table-container
{
width: 900px;
margin: 0;
}
take out the
#gallery{height:100px;}
css because your gallery img height is 450px and the two conflict.
An element will "float" over another element when the floating element's position is set to absolute. I don't see position: absolute; in your CSS, but I do see positioning styles (bottom: 0px; left: 0; etc.) so maybe another style sheet is applying position: absolute. Best way would be to inspect the elements using a browser inspector like Firefox has and see what CSS styles are being applied. You can send me the URL and I will look at it. If you just want to throw a dart at the board you could try setting this style:
#gallery {
position: static !important;
}
Floating generally happens when position: absolute is set in CSS, but strangely, it's not your case.
So, you can try to add a CSS property to this image, called z-index with the value of -1. It'll possibly work.
This property is a kind of "layers". By default, every element is set in z-index: 0.
So, basically, it'll be:
img {
z-index: -1;
}
or, in this case:
#gallery {
z-index: -1;
}
Sorry if my english is bad.