ブラウザのタイプに応じてテキストボックスのサイズを変更します

Question

私のフォームには、firefox.Iに使用しているブラウザのタイプに応じて幅を変更するテキストボックスがあります。テキストボックスの幅を減らすためにCSSを使用していますが、これを一緒に使って私が望むやり方をする方法や、ブラウザに応じてテキストボックスのサイズを変更する簡単な方法はありますか？

jQueryの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
// Opera 8.0+ 
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; 

// Firefox 1.0+ 
var isFirefox = typeof InstallTrigger !== 'undefined'; 

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); 

// Internet Explorer 6-11 
var isIE = /*@cc_on!@*/false || !!document.documentMode; 

// Edge 20+ 
var isEdge = !isIE && !!window.StyleMedia; 

// Chrome 1+ 
var isChrome = !!window.chrome && !!window.chrome.webstore; 

// Blink engine detection 
var isBlink = (isChrome || isOpera) && !!window.CSS; 

jQuery(function($) 
{       
    if(isChrome) { 
     console.log("Using Chrome"); 
    } 

    else if(isFirefox) { 
     //$("#DOB").mask("99/99/9999",{placeholder:" "}); 
     console.log("Using FireFox"); 
    }    
});  
</script> 

CSS

#DOB 
{ 
width:100%; 
max-width: 172px  
} 

Answer 1

あなたはそれらをもとに、あなたの体のブラウザに基づいて、タグ、およびスタイルにクラスを追加することができます。例：

<script> 
jQuery(function($) 
{       
    if (isChrome) { 
     $('body').addClass('browser-chrome'); 
    } else if(isFirefox) { 
     $('body').addClass('browser-firefox'); 
    }    
});  
</script> 

<style> 
.browser-chrome #DOB { 
    width: 100%; 
} 

.browser-firefox #DOB { 
    width: 80%; 
} 
</style>