Change input value source Submit and reset

Asked

Viewed 2,828 times

2

Is there any way to change the value font-family of the Submit input and reset, just like I did with the placeholder using ::-webkit-input-placeholder

And there’s a way someone from you can help me and help me line up the checkbox next to the name, because it’s shifted up.

<!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="author" content="Flavio S. Cabral">
        <!-- FONT MIRIAM LIBRE -->
        <link href="https://fonts.googleapis.com/css?family=Miriam+Libre" rel="stylesheet">
        <style type="text/css">

            body {
                background-color: rgba(46, 86, 162, 0.8);
            }

            fieldset {
                border: none;
            }


            label, legend {
                font-family: 'Miriam Libre', sans-serif;
                color: white;
            }

            input, select {
                margin-top: 15px;
                border-radius: 5px;
                height: 20px;
            }

            select {
                height: 25px;
                font-family: 'Miriam Libre', sans-serif;
            }

            input[type="submit"],  input[type="reset"] {
                height: 25px;
                background-color: white;
                border-radius: 5px;
            }

            ::-webkit-input-placeholder {
                font-family: 'Miriam Libre', sans-serif;
                padding-left: 5px;
            }

        </style>
    </head>
    <body>
    
    <form action="" method="">
        <fieldset>
            <legend>Inscrição</legend>

            <label for="user_name">Nome:</label>
            <input type="text" name="user_name" id="user_name" placeholder="Seu nome..." autofocus> <br>

            <label for="user_email">Email:</label>
            <input type="email" name="user_email" id="user_email" placeholder="[email protected]"> <br>

            <label for="user_address">Endereço:</label>
            <input type="text" name="user_address" id="user_address" placeholder="Rua - Nº"> <br>

            <label for="user_tel">Telefone / Celular:</label>
            <input type="tel" name="user_tel" id="user_tel"> <br>

            <label for="user_curso">Curso:</label>
            <select name="user_curso" id="user_curso">
                <option value="violin">Violino</option>
                <option value="cello">Violoncelo</option>
                <option value="guitar">Violão</option>
                <option value="drums">Bateria</option>
                <option value="piano">Piano</option>
                <option value="saxophone">Saxofone</option>
            </select> <br>

            <label for="user_instrutor">Instrutor:</label>
            <select name="user_instrutor" id="user_instrutor">
                <option value="beethoven">Beethoven</option>
                <option value="bach">Bach</option>
                <option value="mozart">Mozart</option>
                <option value="chopin">Chopin</option>
                <option value="liszt">Liszt</option>
                <option value="tchaikovsky">Tchaikovsky</option>
            </select> <br>

            <label for="user_aulas">Aulas de : </label>
            <input type="checkbox" name="week_days" value="monday" id="monday"> <label for="monday">Segunda-Feira</label> 
            <input type="checkbox" name="week_days" value="tuesday" id="tuesday"> <label for="tuesday">Terça-Feira</label> 
            <input type="checkbox" name="week_days" value="wednesday" id="wednesday"> <label for="wednesday">Quarta-Feira</label> 
            <input type="checkbox" name="week_days" value="thursday" id="thursday"> <label for="thursday">Quinta-Feira</label> 
            <input type="checkbox" name="week_days" value="friday" id="friday"> <label for="friday">Sexta-Feira</label> <br>

            <input type="submit" value="Enviar">
            <input type="reset" value="Limpar">
                
        </fieldset>
    </form>

    </body>
</html>

html html5 css3 webkit

2 answers

4


Yes just set a class for your element.

.submit{
font: Arial;
font-size:12px;
color: #ff0033
}
.reset{
font: Arial;
font-size:12px;
color: #0033ff
}
<input class="submit" type="submit" value="Enviar">
<input class="reset" type="reset" value="Limpar">

If the answer is correct, I could validate it. I hope it helps.

1

No need to use placeholder using ::-webkit-input-placeholder

just put font-family: 'Miriam Libre', sans-serif; that will work

 input[type="submit"],  input[type="reset"] {
  font-family: 'Miriam Libre', sans-serif;
 }

I also put in the example below the layout adjustments also, thence I put the divs more to help in formatting content

<!DOCTYPE html>
    <html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="author" content="Flavio S. Cabral">
        <!-- FONT MIRIAM LIBRE -->
        <link href="https://fonts.googleapis.com/css?family=Miriam+Libre" rel="stylesheet">
        <style type="text/css">

            body {
                background-color: rgba(46, 86, 162, 0.8);
            }

            fieldset {
                border: none;
            }


            label, legend {
                font-family: 'Miriam Libre', sans-serif;
                color: white;
            }

            input, select {
                margin-top: 15px;
                border-radius: 5px;
                height: 20px;
            }

            select {
                height: 25px;
                font-family: 'Miriam Libre', sans-serif;
            }

            input[type="submit"],  input[type="reset"] {
                height: 25px;
                background-color: white;
                font-family: 'Miriam Libre', sans-serif;
                border-radius: 5px;
            }

            ::-webkit-input-placeholder {
                font-family: 'Miriam Libre', sans-serif;
                padding-left: 5px;
            }
          
          .input-label {
            width:100%;
            display: flex;
            align-items: baseline;
          }
          .label{
            
            width:20%;
          }

        </style>
    </head>
    <body>
    
    <form action="" method="">
        <fieldset>
            <legend>Inscrição</legend>
             <div class="input-label">
            <div class="label">
              <label for="user_name">Nome:</label>
            </div>
            <div class="input">
              <input type="text" name="user_name" id="user_name" placeholder="Seu nome..." autofocus> <br>
            </div>
            </div>
            
             <div class="input-label">
              <div class="label">
          
                <label for="user_email">Email:</label>
             </div>
             <div class="input">            
                <input type="email" name="user_email" id="user_email" placeholder="[email protected]"> <br>
             </div>
            </div>
            
            <div class="input-label">
              <div class="label">
                <label for="user_address">Endereço:</label>
                        </div>
            <div class="input">
                <input type="text" name="user_address" id="user_address" placeholder="Rua - Nº"> <br>
                    </div>
            </div>
                
            <div class="input-label">
              <div class="label">
                <label for="user_tel">Telefone / Celular:</label>
                        </div>
            <div class="input">
                <input type="tel" name="user_tel" id="user_tel"> <br>
                     </div>
            </div>
             
            <div class="input-label">
              <div class="label">
                <label for="user_curso">Curso:</label>
                        </div>
            <div class="input">
           <select name="user_curso" id="user_curso">
                <option value="violin">Violino</option>
                <option value="cello">Violoncelo</option>
                <option value="guitar">Violão</option>
                <option value="drums">Bateria</option>
                <option value="piano">Piano</option>
                <option value="saxophone">Saxofone</option>
            </select> <br>
                   </div>
            </div>
                
            <div class="input-label">
              <div class="label">
                <label for="user_instrutor">Instrutor:</label>
                        </div>
            <div class="input">
             <select name="user_instrutor" id="user_instrutor">
                <option value="beethoven">Beethoven</option>
                <option value="bach">Bach</option>
                <option value="mozart">Mozart</option>
                <option value="chopin">Chopin</option>
                <option value="liszt">Liszt</option>
                <option value="tchaikovsky">Tchaikovsky</option>
            </select> <br>
                   </div>
            </div>
                
            <div class="input-label">
              <div class="label">
              <label for="user_aulas">Aulas de : </label>
                        </div>
            <div class="input">
                <input type="checkbox" name="week_days" value="monday" id="monday"> <label for="monday">Segunda-Feira</label> 
                <input type="checkbox" name="week_days" value="tuesday" id="tuesday"> <label for="tuesday">Terça-Feira</label> 
                <input type="checkbox" name="week_days" value="wednesday" id="wednesday"> <label for="wednesday">Quarta-Feira</label> 
            <input type="checkbox" name="week_days" value="thursday" id="thursday"> <label for="thursday">Quinta-Feira</label> 
            <input type="checkbox" name="week_days" value="friday" id="friday"> <label for="friday">Sexta-Feira</label> <br>
                   </div>
            </div>
                
            <input type="submit" value="Enviar">
            <input type="reset" value="Limpar">
                
        </fieldset>
    </form>

    </body>
</html>

Browser other questions tagged html html5 css3 webkit

You are not signed in. Login or sign up in order to post.