Tips for setting the color of hyperlinks in a UIWebView

I'm struggling with formatting a short plain text string, which may include a weblink, in a UIWebView. When I use loadHTMLString, the font style and size appear incorrect. After searching extensively, I ended up embedding the text in a makeshift HTML document with CSS. Here's the code snippet:

NSString *myHtml = [NSString stringWithFormat:
                    @"<html><head>"
                    "<style type=\"text/css\">"
                    "body{"
                    "font-family: Helvetica;"
                    "font-size: 20px;"
                    "a {color: #FFF;}"
                    "},</style>"
                    "</head><body>%@</body></html>", myText];
[self.myWebView loadHTMLString:myHtml baseURL:nil];    

Issue: I'm having difficulty changing the style of links within the text. I've tried a {color:#fff;}, *:link{color:#fff;} and other variations without success. The default link appearance remains unchanged, with no adjustments to color, size, or background.

Any suggestions on how to customize the appearance of links? Would implementing JavaScript be the only solution?

Answer №1

Your placement of the a rule within the body rule is incorrect. Please relocate it outside of the body rule.

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

Remove the input box for submission from the HTML code

How can I remove the 'button' from my input field and replace it with an image? Even after trying different methods, the box still appears. Thank you. <!DOCTYPE html PUBLIC ""> <head> <style> #PlusMinus{background:url(&apo ...

Eliminate placeholder text when the tab key is pressed

I'm currently facing an issue with a textarea that has a placeholder and the Tab key functionality in Internet Explorer. I've included placeholder.js to make it work, but when I repeatedly press the tab key and focus on the textarea, the placehol ...

Issue with background image not covering entire div

I am experiencing an issue where the background image of a div element is not occupying the full image. I want to display images side by side with text underneath them. Below is the CSS code: .img-w { position: relative; background-size: cover; ba ...

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

When the React-bootstrap Popover arrow is oriented vertically, the arrow colors appear to be inverted compared to when it

Utilizing a react-bootstrap Popover component, I have implemented custom styling for the arrow with a gray color and 50% opacity. The CSS code that enables this customization is as shown below: .popover .popover-arrow::before, .popover .popover-arrow::afte ...

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

What is the best way to determine the maximum `width` in a `translateX` animation?

I'm looking to design something similar to a desktop-only carousel. Here's the code snippet I have: <div class="wrapper"> <div class="image-container"> <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"> ...

Ways to adjust the location of the scrollbar using CSS

Can the position of the scroll bar be modified using CSS to switch it from left to right or from bottom to top? ...

Ways to efficiently convert HTML form data into JSON format

Currently, I am in the process of developing an ecommerce platform. As part of this project, I have created a billing form to gather essential information such as email addresses and physical addresses from users. The intention behind collecting this data ...

I am trying to display my progress bar in a col-sm-6 format on screens larger than 546px, however, despite my attempts, I am not seeing any changes on the screen

Is there an alternative method if bootstrap is unable to handle this? I have used col-xs-6, but all I want is to display my progress bar in the image shown on small screens. Here is how I want to display my image on small screens. <div class="cont ...

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

How can you determine the CSS style value based on a different value?

Can I calculate a value based on another value? Here's an example: .my-div { width: 50px; height: calc(width * 2) } Is this doable? ...

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

Allow for separation amongst my cellular components

I have a table with multiple cells and I would like to add some spacing between each <td> element. You can find an example of my code on JSFIDDLE. .line { border-bottom:1px solid black; } .textRotation { -webkit-transform: rotate(-90deg); ...

When a <dl> element is nested within an <ol>, it will be rendered as a list format

I'm facing an issue with my CSS that affects how different browsers render definition lists embedded within ordered lists. In IE10, the list displays as expected - a bulleted list inside the ordered list without affecting the numbering. However, Firef ...

The functionality of the angularjs class seems to be malfunctioning

I'm a new learner of angularjs and I've created a simple page below. I have a style called "item" that I'm trying to apply to a div, but it's not working. However, if I use inline style, then it works fine. Can someone please help me f ...

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Utilizing bootstrap 3.3.7 panels, I encountered an issue when trying to slide up the panel using the icon. The panel would not hide properly once the panel height was set, resulting in only the panel content body sliding up. Here is an example: $(&apo ...

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... https://i.sstatic.net/FFCRW.png My goal is to show the loading indicator when any action, like deleting an item or changing qua ...

CSS animations are only functional when the Developer Tools are activated

I recently implemented a transition to uppercase in CSS, but it seems to only work when I open dev tools in Mozilla and not at all in Chrome. This is my first attempt at using animations in CSS, so any feedback on my code is appreciated. I'm curious ...