How to change the textfield cursor colour in Cordo

Question

I have a blue background in my Cordova based iOS project due to which my cursor is not properly visible in iPhone device.So if anyone faced this please tell me How to change the textfield cursor color in Cordova iOS project or if any HTML attribute to change this tint color

textfield code in index.html:

 <input type="text" placeholder="First Name" id='regFName' />

Answer 1

Try the css attribute caret-color, it's working for me.

Answer 2

try this ,

for background-color user ur screen background color and for colore use white colore

<style>
 .cursor {
     font-size: 12px;
    background-color: blue;
    color: #fff;
    position: relative;
    opacity: 0.5;
   }
</style>
<input class="cursor " type="text" name="firstname">code here

hope this will work for u!!

Answer 3

Sujania - you just need to add the class "cursor" to your input type.

<input class="cursor" type="text" placeholder="First Name" id='regFName' />

Then the CSS will apply as you would expect!

Answer 4

Solution 1: Setting the android:textCursorDrawable attribute to @null should result in the use of android:textColor as the cursor color.

Attribute textCursorDrawable is available in API level 12 and higher

---

Solution 2: With iOS 7 you can simply change tintColor property of the UITextField. This will affect both the color of the text cursor and the text selection highlight color.

You can do this in code...

textField.tintColor = [UIColor redColor];
... or in Interface Builder:

---

Solution 3: In your EditText properties, there is an attribute android:textCursorDrawable

Now set it to @null like,

android:textCursorDrawable="@null"

So now your EditText Cursor is same as your EditText TextColor.

---

Solution 4: Use an image along with CSS cursor property, I don't see any need of JavaScript here...

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

Answer 5

To change the color of the cursor, write css for the cursor as follows:

.cursor {
        font-size: 12px;
        background-color: red;
        color: red;
        position: relative;
        opacity: 0.5;
       }