Удалить границы вокруг полей textarea и ввода?

Question

У меня есть следующая проблема: поля textarea и input полупрозрачны, но я не могу полностью удалить границу вокруг них. Я попытался сделать прозрачные границы или указать border: none;, но они не исчезают (см. Изображение ниже)

Кто-нибудь знает хорошее решение?

Спасибо!

Answer 1

Во-первых, убедитесь, что границы действительно применяются на текстовое поле, элементы ввода, а не другие элементы, такие, как их родители.

Затем убедитесь, что стили границы не применяются с !important в css-файлах на textarea, элементы ввода.

Наконец

$('textarea, input').css('border', 'none !important'); 

Answer 2

Почему вы просите JavaScript?

Попробуйте это:

// No border 
border-width: 0; 

// No box shadow 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 

// No outline (ex: blue shadow on Mac OsX on focus) 
outline: 0; 

Answer 3

Попробуйте это:

textarea { 
    border: none; 
    overflow: auto; 
    outline: none; 

    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 

Answer 4

Если у вас есть класс с конкретными правилами, вы можете использовать:

$("#idTextarea").addClass("classYouNeed"); 

если вы только удалить границей

$("#idTextarea").css('border', 'none'); 

Даже если вы хотите использовать только JavaScript:

document.getElementById("#idTextarea").style.borderStyle = "none"; 

Answer 5

Возможно, немного неуклюжий, но вместо «удалить» границы, почему бы не просто определить их цвет как такой же, как цвет фона?