Entry Field

I need to change the color of the outline for my entry field does anyone know a quick and easy way?

Discussion (7)

It can be done with CSS. Add a .css file as a html extension with the following code:

input[type=text] {

border: 2px solid red;

border-radius: 4px;

}

The first line makes the border: border-width, border-style, color.

The second line makes rounded corners. You can delete this line if you don't want rounded corners.

This style will be applied to all input fields.

Tim

There are at least two blogs by Trivantis regarding styling entry fields:

http://trivantis.com/blog/using-css-style-lectora-course/

http://trivantis.com/blog/style-entry-fields-lectora-using-css/

The unselected text field has "border" and selected field has "outline" so you have to set both to none, like this: https://jsfiddle.net/ygha6cor/

Excellent thanks so much guys - appreciate it

You're using Chrome, right? If you are talking about the outline that Chrome puts around a selected input add the following declaration to Tim's CSS:

outline: none;

If you're not talking about that outline, you should read those two blog posts Sergey provided. The selector Tim provided will effect ALL text type inputs (as he pointed out). You need to add additional specificity if you're looking to target just one. That brings up another issue, the HTML Name that Lectora provides is not the selector you want to use or you will get undesired results. Read the blogs for more info.

Darrel

Thanks Tim that worked...Quesstion When I click on the entry field it looks like it is picking up the outline from the controller css that I am using on another page. It is putting a gold line around it..I don't want any outlines to appear when I arrive at the page or when I click on the entry field..how do I do that...

No I want all the entry boxes in the course to be invisible. I have accomplished this with Tim's suggestion, however now when in run mode, the entry box is invisible until I click on it to enter something and then a gold outline appears...I want no outline at all on any entry box ever whether arriving at my page as well as clicking on it to enter text.

Discussions have been disabled for this post