Ways to eliminate the border of a text area when it is in focus

I successfully managed to eliminate the border around the text area, but I want it so that users cannot see a border even when they click on it. Below is my current CSS code.

.comments{
    border: 0 none #FFF;
    overflow: hidden;
}

I attempted to make the border transparent and also tried with other attributes such as active, but it did not work. Here is an example of what I tried:

.comments:focus{
    border: 0 none #FFF;
    overflow: hidden;
}

Is there a way to remove the border when the text area is focused on?

Just to clarify, the border is only visible once the textarea is clicked on. So setting the border to none does work.

Answer №1

To remove the border around the textarea, you should include outline:none.

.comments:focus{
    border: 0 none #FFF;
    overflow: hidden;
    outline:none;
}

Check out a demo on JsFiddle

Answer №2

Remove the outline from textarea and input elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the PHP stylesheet import be configured to exclude a specific string?

Can I import a PHP stylesheet named style.php into my HTML document? Is there a way to delete certain strings from style.php, such as <style> tags, before importing it using traditional methods like <link>? ...

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

What is the best way to combine MVVM, offline storage, and Knockout.js in a project?

Although I have experience with implementing Mvvm using Knockout.js, my goal now is to incorporate this framework with cross-browser support for Firefox and Chrome along with HTML5 offline storage capabilities. Specifically, I am looking to bind HTML obje ...

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

Switch the checkbox back if an error occurs

I'm having an issue with a styled checkbox that appears to flip when clicked. Upon user interaction, the checkbox visually flips on the client side, while sending a request to save the change in a database on the server. In case of an error, I need to ...

CSS for horizontal scrolling

Hey there, I'm in the process of putting together a page at [link removed]. The top header is currently set at a large size of 1600px to cater to wider monitors. Unfortunately, setting it to 100% width is causing some strange rotation effects. To pr ...

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Currently, I am using the open source project openhtmltopdf but I have encountered a certain issue. Within a div-element, I have a p-tag with text-align: right styling. The text is aligned correctly to the right until there is a line break due to the widt ...

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

extracting metadata from HTML files with Java

Hello! I have been working on a project that requires metadata for different file types such as HTML and XML. Are there any APIs available to help with this task? Any ideas or suggestions regarding the matter would be greatly appreciated. Thank you in ad ...

The grid columns are not wrapping properly as anticipated

I currently have a bootstrap-4 column setup that looks like this: <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4">A</div> <div class="col-xs-6 col-sm-4"& ...

The autocomplete feature is enabled for input using a mouse

I have a situation where I am using mouseleave handler to trigger Angular input errors when the mouse leaves the input field. Everything works perfectly in this scenario - the errors are highlighted as intended. However, I encounter an issue with the autoc ...

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)

My website has a left side column and a right side column, which display correctly in Firefox and Chrome. However, I am experiencing issues with Safari. Any insights on what could be causing this problem and why it only occurs in Safari? View the code on ...

Adjust page to fit any size of screen resolution

Currently, I am in the process of designing a print template for my website. Everything seems to be going smoothly except for one issue that has arisen. The screen resolution on my device is 1600x900, so I have designed the page specifically for this resol ...

Utilizing JavaScript to present JSON data in HTML tables across various sections of a website

Utilizing JScript to retrieve data from a JSON API URL, I have incorporated the data in the JSON file displayed below - containing information on 8 horse races with details like Horse number, Horse name, and their odds. My goal is to create a Jscript code ...

Issue with enlarging images using UL and LI tags persists

After implementing the code for a simple image enlarge feature (showing a QR code image when the user hovers over the icon), I noticed an issue. Interestingly, the same code is used on two designs, but it's not working on one of them. To view the pr ...

The process is consuming a significant amount of time to generate the expected result

My code is currently running all the queries inside a while loop and it's taking around 1 minute to complete. I need suggestions on how to optimize it for faster performance. Here is my code: <table style="font-size:13px" width="150%" border="0" c ...

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Today, I was experimenting with XMLHttpRequest to fetch news headlines from 10 different countries using the NewsAPI. I created 10 <li> tags for each country and assigned them an onclick function that triggers a JavaScript function to append the coun ...

The body element is inheriting the background-color

I am attempting to create a layout with two stacked elements and a footer. .background .container-fluid .footer You can view my code on this fiddle: http://jsfiddle.net/z9Unk/309/ My expectation is for the background to be displayed in green with the ...