Tag: html

Sustituir icono radio button bootstrap 4

Vamos a sustituir el icono standard del radio button por algo más visible. En este caso práctico vamos a cambiar el modo de visualización de un listado, por lo que vamos a hacer que los iconos sean visiblemente más acorde a lo que se sugiere que es cambiar la vista a modo «Bloque» o modo «Listado».

Para realizar la estructura HTML he usado – bootstrap 4

Para los iconos – fontawesome 5

La estructura CSS tiene que estar bien anidada para no machacar otros estilos.

Efecto Inclinado (Skew Effect) HTML + CSS

La inclinación de bordes con CSS (css skew effect) es el efecto en el que los laterales (izquierda y/o derecha) aparecen inclinados. Ejemplo:

El efecto lo logramos utilizando la propiedad transform: skew.  Con esto y un poco más de estilos obtenemos el resultado.

HTML:

<div id="user-config-1" class="square-skew square-dark-blue text-white">
<span>
<label>Config 1</label>
<i type="btn" class="edit-config fas fa-pencil-alt" title="Editar"></i>
<i type="btn" class="remove-config fa fa-times"></i>
</span></div>

CSS:

.square-skew {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    padding: 0.2rem 0;
    position: relative;
    left: 10px;
    float: left;
}

.square-skew label {
    margin: 0 !important;
    font-weight: bold;
}

.square-skew span {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    display: inline-block;
    font-size: 0.625rem;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.square-dark-blue {
    background-color: #007cb6;
    margin-right: 0.625rem;
}

Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept» para que una vez se abra el dialogo para elegir el archivo se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.


<input id="campoFile" accept="tipo_de_archivo|audio/*|video/*|image/*|media_type" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc): accept=»audio/*»
IMAGES: accept=»image/gif,image/jpeg,image/jpg,image/png»
EXCEL 97-2003 (.xls): accept=»application/vnd.ms-excel»
EXCEL 2007+ (.xlsx): accept=»application/vnd.openxmlformats-officedocument.spreadsheetml.sheet»
PDF: accept=».pdf»
VIDEO (.avi, .mpg, .mpeg, .mp4): accept=»video/*»

Validar Tamaño y Extensión con Javascript y Jquery

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando JQUERY antes de enviarlo por POST.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: