Recursos para la resolución de problemas HTML
Debe tener width especificado
.div{
width: 50%
margin: 0 auto;
}
Source: http://jsfiddle.net/kizu/4RPFa/4570/
<div class="container">
<div class="wrap"></div>
<img src="http://lorempixel.com/100/100">
</div>
.container {
text-align: center;
}
.container .wrap {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.container img {
display: inline-block;
vertical-align: middle;
}
.div{
margin-left:auto;
margin-right:0;
}
#mydiv{
user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
}
input, select, textarea{
outline: 0;
}
Source: https://shellzero.wordpress.com/2015/06/29/adding-a-placeholder-to-the-select-tag-in-html5/
<select name=”browsers” required>
<option value=”” disabled selected>Choose a Browser</option>
<option value=”chrome”>CHROME</option>
<option value=”safari”>SAFARI</option>
<option value=”opera”>OPERA</option>
</select>
option[value=””][disabled] {
display: none;
}
Source: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ Source: http://jsfiddle.net/angelfcm/nETSD/light/
<div id='div-file'>
<input type='file' id='input-file'>
<span id='span-file'>Seleccionar fichero</span>
</div>
#div-file{
overflow: hidden;
position: relative;
cursor: pointer;
width: 200px;
height: 100px;
background-color: blue;
}
#input-file{
margin: 0;
padding: 0;
outline: 0;
font-size: 10000px;
border: 10000px solid transparent;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: -1000px;
top: -1000px;
cursor: pointer;
}
$("#input-file").change(function () {
$("#span-file").text($(this).val().match(/[^\/\\]+$/));
});
<input type="checkbox" id="mycheckbox">
#mycheckbox {
visibility: hidden;
width: 30px;
height: 30px;
}
#mycheckbox:after {
content: " ";
width: 100%;
height: 100%;
visibility: visible;
cursor: pointer;
display: inline-block;
background-color: white;
border: red solid 2px;
}
#mycheckbox:checked:after {
content: "\2714";
font-size: 23px;
text-align: center;
}
<div id="myselect">
<select>
<option value="1">1</option>
</select>
</div>
#myselect{
position: relative;
height: 50px;
width: 150px;
}
#myselect > select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 100%;
width: 100%;
}
#myselect:after{
position: absolute;
top: 0;
right: 5%;
height: 100%;
width: 10%;
background-image: url(arrow.png);
background-size: 100%;
background-position: 50%;
background-repeat: no-repeat;
}
https://ksesocss.blogspot.com/2012/03/display-inline-block-y-sus-empeno-en.html