更改浮動標籤上的標籤顏色

我創建了一個浮動標籤，它將更改邊框顏色和標籤元素。我的問題是當輸入裏面有一些內容時如何改變標籤顏色？更改浮動標籤上的標籤顏色

顏色應該是粉紅色的，當輸入集中，但是當有人輸入的東西，點擊其他地方，顏色應改回正常

$('.form-control').on('focus blur', function (e) { 
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); 
}) 
.trigger('blur');

CSS

#floating-label .form-group .form-control { 
    border:none; 
    border-bottom: 1px solid red; 
    border-radius: 0; 
} 

#floating-label .form-group { 
    display: flex; 
    height: 55px; 
} 

#floating-label .form-control:focus{ 
    border-color: #FF4070; 
} 

#floating-label .control-label { 
    font-size: 1rem; 
    font-weight: 400; 
    opacity: 0.4; 
    pointer-events: none; 
    position: absolute; 
    transform: translate3d(6px, 22px, 0) scale(1); 
    transform-origin: left top; 
    transition: 240ms; 
} 

#floating-label .form-group.focused .control-label { 
    opacity: 1; 
    transform: scale(0.75); 
    color: #FF4070; 
} 

#floating-label .form-control { 
    align-self: flex-end; 
} 

#floating-label .form-control::-webkit-input-placeholder { 
    color: transparent; 
    transition: 240ms; 
} 

#floating-label .form-control:focus::-webkit-input-placeholder { 
    transition: none; 
} 

#floating-label .form-group.focused .form-control::-webkit-input-placeholder { 
    color: #bbb; 
}

html

<form id="floating-label"> 
    <div class="form-group"> 
     <label class="control-label">Example label</label> 
     <input type="text" class="form-control"> 
    </div> 
    <div class="form-group"> 
     <label class="control-label">Another label</label> 
     <input type="text" class="form-control"> 
    </div> 
    </form>

bootply

來源

2016-11-09 doe.2211

這不是在我的情況發生，它完美地工作。請確保您本地的東西沒有衝突 –

我在很多設備上進行過測試，並且每次輸入字段中都有內容時，標籤保持粉紅色並且不會更改回默認顏色 –

ü需要烏爾腳本改變這一

$('.form-control').on('blur', function (e) { 
    var parent = $(this).parents('.form-group'); 
    parent.removeClass('focused'); 
    if(this.value.length > 0) { 
     parent.addClass('filled'); 
    } 
}) 
.trigger('blur'); 

$('.form-control').on('focus', function (e) { 
    var parent = $(this).parents('.form-group'); 
    parent.removeClass('filled'); 
    parent.addClass('focused'); 
});

來源

2016-11-10 17:19:59

你只需要增加一個額外的if語句來檢查的長度和改變風格。

$('.form-control').on('focus blur', function (e) { 
    $(this).parents('.form-group').toggleClass('focused', (e.type == 'focus' || this.value.length > 0)); 

    //below lines added 
    if(this.value.length > 0) { 
    $(this).prev('.control-label').css('color', 'black'); 
    } 
});

來源

2016-11-09 12:43:21

你的JavaScript只要改成這樣：

$('.form-control').on('focus blur', function (e) { 
 
     $(this).parents('.form-group').toggleClass('focused'); 
 
    })

#floating-label .form-group .form-control { 
 
    border:none; 
 
    border-bottom: 1px solid red; 
 
    border-radius: 0; 
 
} 
 

 
#floating-label .form-group { 
 
    display: flex; 
 
    height: 55px; 
 
} 
 

 
#floating-label .form-control:focus{ 
 
    border-color: #FF4070; 
 
} 
 

 
#floating-label .control-label { 
 
    font-size: 1rem; 
 
    font-weight: 400; 
 
    opacity: 0.4; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    transform: translate3d(6px, 22px, 0) scale(1); 
 
    transform-origin: left top; 
 
    transition: 240ms; 
 
} 
 

 
#floating-label .form-group.focused .control-label { 
 
    opacity: 1; 
 
    transform: scale(0.75); 
 
    color: #FF4070; 
 
} 
 

 
#floating-label .form-control { 
 
    align-self: flex-end; 
 
} 
 

 
#floating-label .form-control::-webkit-input-placeholder { 
 
    color: transparent; 
 
    transition: 240ms; 
 
} 
 

 
#floating-label .form-control:focus::-webkit-input-placeholder { 
 
    transition: none; 
 
} 
 

 
#floating-label .form-group.focused .form-control::-webkit-input-placeholder { 
 
    color: #bbb; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="floating-label"> 
 
    <div class="form-group"> 
 
     <label class="control-label">Example label</label> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label">Another label</label> 
 
     <input type="text" class="form-control"> 
 
    </div> 
 
    </form>

來源

2016-11-09 12:47:10

更改浮動標籤上的標籤顏色

回答

相關問題