Colore predefinito dell'input HTML5

Question

input type="color" ha un colore predefinito nero: #000000.

Anche se mi danno un valore vuoto ...

<input type="color" value="" />

... il colore predefinito è sempre nero.

Voglio che l'utente abbia la possibilità di scegliere un colore, ma se non lo fa vuol dire che non è stato selezionato alcun colore, nemmeno bianco #FFFFFF.

C'è un modo per forzare un input type="color" a non avere il colore nero come predefinito?

Posso usare una sorta di "listener" per verificare se l'utente ha cambiato il colore per la prima volta, in caso contrario, ignorare il valore, ma vorrei evitare Javascript.

Answer 1

Usa valore:

<input type="color" value="#ff00ff" /> 

Se vuoi sapere se l'ingresso rimangono invariati, si può fare qualcosa di simile (con jQuery):

$(function(){ 
    $('input').change(function(){ 
     $(this).addClass('changed'); 
    }) 
}) 

http://jsfiddle.net/j3hZB/

Answer 2

Edit: Da allora, ho capito bene la tua domanda, ho aggiornato la mia risposta.

Sebbene lo W3C Spec definisca che l'attributo value abbia una stringa che rappresenta il colore, non definisce il colore predefinito. Quindi penso che l'implementazione del colore di default sia lasciata alla discrezione del browser.

Tuttavia, il WhatWG Spec anwers tua domanda con questa nota,

Nota: Quando l'elemento tipo di ingresso è in stato di colore, c'è sempre un colore scelto, e non v'è alcun modo per impostare il valore alla stringa vuota.

Inoltre, sulla base di aspettative, il linguaggio CSS mai definito un attributo NULL per ogni elemento, che rende impossibile per il input type='color' di avere NULL come valore di default.

Soluzione:

La soluzione è presente negli API ombra DOM.

Utilizzando Chrome Developer Tools, ho scoperto che siamo in grado di dare un colore transparent all'elemento pseudo ::-webkit-color-swatch sfondo proprietà -

input[type=color]::-webkit-color-swatch 
{ 
    background-color: transparent !important; 
} 

Per quanto sopra CSS, il codice HTML dovrebbe come questo - <input type="color"> .Ora non è necessario avere alcun tipo di listener per dire se l'utente ha cambiato il colore predefinito o meno. Puoi semplicemente considerare il colore transparent come il colore NULL in base al quale puoi decidere se il valore è stato modificato o meno!

Sono sicuro che troverete un tipo simile di informazioni dal DOM ombra per Firefox per impostare il valore trasparente per lo sfondo. IE rimane ancora un dolore per noi.

Answer 3

Durante l'utilizzo hexcode per value attributo nel <input type="color">, una cosa che ho notato è che deve essere sei cifre, se per il bianco si utilizza #fff, non funziona. Deve essere #ffffff.

La stessa cosa accade quando si imposta tramite javascript. document.querySelector('input[type="color"]').value = '#fff' non funziona. Il colore rimane nero. È necessario utilizzare document.querySelector('input[type="color"]').value = '#ffffff' perché funzioni.

Qualcosa su cui fare attenzione.

Answer 4

Non so se questo problema è disponibile solo su Chrome, ma ho appena trovato la soluzione rapida per Chrome. Abbiamo bisogno di impostare il valore di ingresso a #FFFFFF prima e dopo che la pongono al valore di default, il colore di default appariranno al posto del nero

var element = document.querySelector('input[type="color"]'); 
element.value = '#FFFFFF'; //remember the hex value must has 7 characters 
element.value = element.defaultValue; 

speranza è aiutare qualcuno :)

Answer 5

Ecco la mia soluzione, commutazione tipo di ingresso da testo a colori:

$(document).on('click', '.dc-color-input-switcher', function() { 
 
    var dcInputColor = $(this).parent().parent().prev(); 
 
    if (dcInputColor.attr('type') == 'text') { 
 
    dcInputColor.attr('type', 'color'); 
 
    } else { 
 
    dcInputColor.attr('type', 'text'); 
 
    } 
 
}); 
 

 
$(document).on('click', '.dc-color-input-clearer', function() { 
 
    var dcInputColor2 = $(this).parent().parent().next(); 
 
    if (dcInputColor2.attr('type') == 'color') { 
 
    dcInputColor2.attr('type', 'text'); 
 
    } 
 
    dcInputColor2.val(''); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="input-group"> 
 
    <div class="input-group-btn"> 
 
    <div class="btn-group"> 
 
     <span title="Empty" class="btn btn-danger dc-color-input-clearer" data-original-title="Empty Field"><i class="fa fa-times"></i></span> 
 
    </div> 
 
    </div> 
 
    <input name="product_tabs[1][0][bg_color]" value="" placeholder="Background Color" class="form-control pre-input-color" type="text"> 
 
    <div class="input-group-btn"> 
 
    <div class="btn-group"> 
 
     <span title="Toggle color picker" class="btn btn-primary dc-color-input-switcher" data-original-title="Switch color picker"><i class="fa fa-paint-brush"></i></span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 6

ho implementato questo tipo di soluzione per mys elfo. Visualizza un bel pulsante "trasparente". Quando si fa clic, attiva il normale colore di input nascosto. Quando il colore viene prelevato, il pulsante trasparente si nasconde e viene visualizzato il colore di input.

Cheers.

function clickInputColor(button) 
 
{ 
 
\t $(button).next().click(); 
 
} 
 

 
function inputColorClicked(input) 
 
{ 
 
\t $(input).show(); 
 
\t $(input).prev().hide(); 
 
}

.inputEmptyColorButton { 
 
\t background:url("http://vickcreator.com/panel/images/transparent.png") center repeat; 
 
\t width: 50px; 
 
\t height: 1.5em; 
 
\t vertical-align: bottom; 
 
\t border: 1px solid #666; 
 
\t border-radius: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="clickInputColor(this);" class="inputEmptyColorButton"></button> 
 
\t \t \t \t \t <input onchange="inputColorClicked(this);" style="display: none;" type="color" value="" />