effect with jQuery on select

Question

effect with jQuery on select

Navigation

#1 by (2 votes)

1

I'm putting together a custom input with the style of google's design material.

The effect is working in the input, but in the select is not working. Does anyone know what I'm doing wrong?

NOTE: The effect I'm referring to is the blue line below the select.

$(document).ready(function() {

  // Efeito do label
  $('.form_campos').on('focus blur', function(e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
    $(this).parents('.form-group').toggleClass('animate', (e.type === 'focus'));
  }).trigger('blur');
  $('.select').on('change blur', function(e) {
    $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
  }).trigger('blur');

  // Auto focus
  $(".autofocus").trigger('focus');

  // Verifica se o input esta disabilitado
  $('input:disabled').addClass('form_disabled');

  // Verifica se o select esta disabilitado
  $('select:disabled').addClass('select_disabled');

  // Converte minusculas em maiusculas
  $('input').not('[name="link"]').on('input', function() {

    // Armazena posição corrente do cursor
    var start = this.selectionStart,
      end = this.selectionEnd;
    this.value = this.value.toUpperCase();

    // Restaura posição armazenada anteriormente.
    this.setSelectionRange(start, end);
  });
});

/* Input */

.form-group {
  margin-top: 20px;
  position: relative;
  display: flex;
  height: 45px;
  float: left;
}

.form-group::after {
  width: 100%;
  height: 2px;
  background: #0091FF;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  transform: scaleX(0);
  transition: ease-in-out 240ms all;
}

.form-group.animate::after {
  transform: scaleX(1);
}

.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
}

.form-group.focused .control-label,
.form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 31px;
  width: 100%;
  color: #484848;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  background: transparent;
  border-radius: 0;
}

.form_campos:hover,
.form_campos:focus {
  border-color: #0091FF;
}

.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
  border-color: #D7D7D7;
}


/* Select */

.select {
  height: 31px;
  color: #484848;
  border-radius: 0;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  outline: none;
  margin-top: 14px;
  background: transparent;
  padding-right: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select::after {
  width: 100%;
  height: 1px;
  background: #0091FF;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  transform: scaleX(0);
  transition: ease-in-out 240ms all;
}

select::-ms-expand {
  display: none;
}

.select:hover,
.select:focus {
  border: 0 solid;
  border-bottom-width: 2px;
  border-color: #0091FF;
  transform: scaleX(1);
}

.form-group-select {
  margin-top: 20px;
  position: relative;
  height: 45px;
  float: left;
}

.form-group-select:after {
  content: "9C";
  color: #484848;
  transform: rotate(90deg);
  right: 8px;
  top: 22px;
  position: absolute;
  pointer-events: none;
}

.select_disabled,
.select_disabled:hover,
.select_disabled:focus {
  border: 0 solid;
  border-bottom-width: 1px;
  border-color: #D7D7D7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='form-group'><labelclass='control-label'for='nome'>NOME</label><inputtype='text'class='form_campos'id='nome'name='nome'></div><br><br><br><br><br><br><divclass='form-group-select'><labelclass='control-label'>GOSTOU?</label><selectname='gostou'class='selectform_campos'><optionvalue="s">SIM xxxxxxxxxxxxxx</option>  
                    <option value="n">NÃO xxxxxxxxxxxxxx</option>
                </select>
</div>

javascript jquery css

asked by anonymous 10.05.2017 / 00:17

1 answer

Increase in JavaScript function Play 3d graph with contour lines in software R

score 2 · Accepted Answer

In the jQuery code, change change by focus to match the validation of the toggleClass() function. In addition, add one more line inside the select function to set the animation. This makes the function:

  $('.select').on('focus blur', function(e) {
    $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
    $(this).parents('.form-group-select').toggleClass('animate', (e.type === 'focus'));

Already in CSS:

Add :

.form-group-select.animate::after {
  transform: scaleX(1);
}

Change:

.select::after {
  width: 100%;
  height: 1px;
  background: #0091FF;
  position: absolute;
}

.select:hover,
.select:focus {
  border: 0 solid;
  border-bottom-width: 1px;
  border-color: #0091FF;
  transform: scaleX(1);
}

.form-group-select:after {
    width: 100%;
    height: 2px;
    background: #0091FF;
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    transform: scaleX(0);
    transition: ease-in-out 240ms all;
}

The animation occurs at the level of the div ( <div class='form-group-select'> ) and not the select, so the changes in both classes. Already in .select:hover,.select:focus you should decrease the border width to 1px so that the border does not increase in size when "focused."

See DEMO